<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha256-CTSx/A06dm1B063156EVh15m6Y67pAjZZaQc89LLSrU=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.24/fancybox/fancybox.css" integrity="sha256-vQkngPS8jiHHH0I6ABTZroZk8NPZ7b+MUReOFE9UsXQ=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"rjyblog.gitee.io","root":"/","images":"/images","scheme":"Pisces","darkmode":false,"version":"8.18.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":null},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="下面是Flutter官网提供的关于三棵树的介绍，比较形象，这里直接摘录了，可以参考原文。 123456789Container(  color: Colors.blue,  child: Row(    children: [      Image.network(&amp;#x27;https:&#x2F;&#x2F;www.example.com&#x2F;1.png&amp;#x27;),      const Text(&amp;#x27;A">
<meta property="og:type" content="article">
<meta property="og:title" content="Flutter三棵树">
<meta property="og:url" content="https://rjyblog.gitee.io/posts/507c84ae.html">
<meta property="og:site_name" content="任建勇的博客">
<meta property="og:description" content="下面是Flutter官网提供的关于三棵树的介绍，比较形象，这里直接摘录了，可以参考原文。 123456789Container(  color: Colors.blue,  child: Row(    children: [      Image.network(&amp;#x27;https:&#x2F;&#x2F;www.example.com&#x2F;1.png&amp;#x27;),      const Text(&amp;#x27;A">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://rjyblog.gitee.io/images/Flutter/Flutter%E4%B8%89%E6%A3%B5%E6%A0%91%E7%A4%BA%E6%84%8F%E5%9B%BE.webp">
<meta property="article:published_time" content="2024-01-14T02:21:04.000Z">
<meta property="article:modified_time" content="2024-01-15T01:42:57.162Z">
<meta property="article:author" content="Jason">
<meta property="article:tag" content="Flutter">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://rjyblog.gitee.io/images/Flutter/Flutter%E4%B8%89%E6%A3%B5%E6%A0%91%E7%A4%BA%E6%84%8F%E5%9B%BE.webp">


<link rel="canonical" href="https://rjyblog.gitee.io/posts/507c84ae.html">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://rjyblog.gitee.io/posts/507c84ae.html","path":"posts/507c84ae.html","title":"Flutter三棵树"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Flutter三棵树 | 任建勇的博客</title>
  








  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">任建勇的博客</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Widget%E6%A0%91"><span class="nav-text">Widget树</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#StatelessWidget"><span class="nav-text">StatelessWidget</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#StatefulWidget"><span class="nav-text">StatefulWidget</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#RenderObjectWidget%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90"><span class="nav-text">RenderObjectWidget源码分析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Element%E6%A0%91"><span class="nav-text">Element树</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#RenderObject%E6%A0%91"><span class="nav-text">RenderObject树</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E6%A3%B5%E6%A0%91%E7%9A%84%E7%94%9F%E6%88%90%E8%BF%87%E7%A8%8B"><span class="nav-text">三棵树的生成过程</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#RootWidget%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B"><span class="nav-text">RootWidget创建过程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Element-mount"><span class="nav-text">Element.mount</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#ComponentElement"><span class="nav-text">ComponentElement</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#SingleChildRenderObjectElement"><span class="nav-text">SingleChildRenderObjectElement</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#MultiChildRenderObjectElement"><span class="nav-text">MultiChildRenderObjectElement</span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Jason"
      src="/images/avatar.png">
  <p class="site-author-name" itemprop="name">Jason</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">66</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">13</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">23</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://rjyblog.gitee.io/posts/507c84ae.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.png">
      <meta itemprop="name" content="Jason">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="任建勇的博客">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Flutter三棵树 | 任建勇的博客">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Flutter三棵树
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2024-01-14 10:21:04" itemprop="dateCreated datePublished" datetime="2024-01-14T10:21:04+08:00">2024-01-14</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2024-01-15 09:42:57" itemprop="dateModified" datetime="2024-01-15T09:42:57+08:00">2024-01-15</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><p>下面是Flutter官网提供的关于三棵树的介绍，比较形象，这里直接摘录了，可以参考<a target="_blank" rel="noopener external nofollow noreferrer" href="https://flutter.cn/docs/resources/architectural-overview#build-from-widget-to-element">原文</a>。</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Container(</span><br><span class="line">  color: Colors.blue,</span><br><span class="line">  child: Row(</span><br><span class="line">    children: [</span><br><span class="line">      Image.network(<span class="string">&#x27;https://www.example.com/1.png&#x27;</span>),</span><br><span class="line">      <span class="keyword">const</span> Text(<span class="string">&#x27;A&#x27;</span>),</span><br><span class="line">    ],</span><br><span class="line">  ),</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>上面这段代码构建的三棵树如下所示：</p>
<p><img src="/images/Flutter/Flutter%E4%B8%89%E6%A3%B5%E6%A0%91%E7%A4%BA%E6%84%8F%E5%9B%BE.webp" alt="Flutter三棵树示意图"></p>
<p>在开发调试阶段使用<a target="_blank" rel="noopener external nofollow noreferrer" href="https://flutter.cn/docs/development/tools/devtools/inspector">Flutter inspector</a>可以看出实际的Widget树要比代码中描述的层级更深。</p>
<h2 id="Widget树"><a href="#Widget树" class="headerlink" title="Widget树"></a>Widget树</h2><p>先看下Widget的家族：</p>
<?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="494px" preserveAspectRatio="none" style="width:967px;height:494px;background:#FFFFFF;" version="1.1" viewBox="0 0 967 494" width="967px" zoomAndPan="magnify"><defs/><g><!--class Widget--><g id="elem_Widget"><rect codeLine="1" fill="#F1F1F1" height="48" id="Widget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="82" x="588" y="7"/><ellipse cx="603" cy="23" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M605.0781,24.8125 L605.4688,25.7969 L605.0781,25.7969 C604.625,25.7969 604.5156,25.8125 604.3594,25.9219 C604.1094,26.0781 603.9531,26.3594 603.9531,26.6563 C603.9531,26.9219 604.0938,27.1719 604.3125,27.3281 C604.4531,27.4531 604.6563,27.5 605.0781,27.5 L607.4375,27.5 C607.7969,27.5 608.0156,27.4688 608.1563,27.375 C608.4063,27.2344 608.5625,26.9375 608.5625,26.6563 C608.5625,26.375 608.4219,26.125 608.2031,25.9688 C608.0313,25.8281 607.875,25.7969 607.4063,25.7969 L604.0156,17.5938 L600.3438,17.5938 C599.8906,17.5938 599.7656,17.6094 599.6094,17.7031 C599.3594,17.875 599.2031,18.1563 599.2031,18.4375 C599.2031,18.7188 599.3438,18.9688 599.5625,19.1406 C599.7344,19.25 599.9063,19.2813 600.3438,19.2813 L601.4219,19.2813 L598.7813,25.7969 C598.3594,25.7969 598.2031,25.8125 598.0469,25.9219 C597.7969,26.0781 597.6406,26.3594 597.6406,26.6563 C597.6406,27.2188 598.0156,27.5 598.7656,27.5 L601.0313,27.5 C601.3906,27.5 601.6094,27.4688 601.7344,27.375 C602,27.2344 602.1406,26.9375 602.1406,26.6563 C602.1406,26.375 602.0156,26.125 601.7969,25.9531 C601.625,25.8281 601.4844,25.7969 601.0313,25.7969 L600.6406,25.7969 L601.0313,24.8125 L605.0781,24.8125 Z M604.375,23.1094 L601.7031,23.1094 L603.0469,19.8438 L604.375,23.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="50" x="617" y="27.8467">Widget</text><line style="stroke:#181818;stroke-width:0.5;" x1="589" x2="669" y1="39" y2="39"/><line style="stroke:#181818;stroke-width:0.5;" x1="589" x2="669" y1="47" y2="47"/></g><!--class RenderObjectWidget--><g id="elem_RenderObjectWidget"><rect codeLine="3" fill="#F1F1F1" height="48" id="RenderObjectWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="180" x="257" y="115"/><ellipse cx="272" cy="131" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M274.0781,132.8125 L274.4688,133.7969 L274.0781,133.7969 C273.625,133.7969 273.5156,133.8125 273.3594,133.9219 C273.1094,134.0781 272.9531,134.3594 272.9531,134.6563 C272.9531,134.9219 273.0938,135.1719 273.3125,135.3281 C273.4531,135.4531 273.6563,135.5 274.0781,135.5 L276.4375,135.5 C276.7969,135.5 277.0156,135.4688 277.1563,135.375 C277.4063,135.2344 277.5625,134.9375 277.5625,134.6563 C277.5625,134.375 277.4219,134.125 277.2031,133.9688 C277.0313,133.8281 276.875,133.7969 276.4063,133.7969 L273.0156,125.5938 L269.3438,125.5938 C268.8906,125.5938 268.7656,125.6094 268.6094,125.7031 C268.3594,125.875 268.2031,126.1563 268.2031,126.4375 C268.2031,126.7188 268.3438,126.9688 268.5625,127.1406 C268.7344,127.25 268.9063,127.2813 269.3438,127.2813 L270.4219,127.2813 L267.7813,133.7969 C267.3594,133.7969 267.2031,133.8125 267.0469,133.9219 C266.7969,134.0781 266.6406,134.3594 266.6406,134.6563 C266.6406,135.2188 267.0156,135.5 267.7656,135.5 L270.0313,135.5 C270.3906,135.5 270.6094,135.4688 270.7344,135.375 C271,135.2344 271.1406,134.9375 271.1406,134.6563 C271.1406,134.375 271.0156,134.125 270.7969,133.9531 C270.625,133.8281 270.4844,133.7969 270.0313,133.7969 L269.6406,133.7969 L270.0313,132.8125 L274.0781,132.8125 Z M273.375,131.1094 L270.7031,131.1094 L272.0469,127.8438 L273.375,131.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="148" x="286" y="135.8467">RenderObjectWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="258" x2="436" y1="147" y2="147"/><line style="stroke:#181818;stroke-width:0.5;" x1="258" x2="436" y1="155" y2="155"/></g><!--class SingleChildRenderObjectWidget--><g id="elem_SingleChildRenderObjectWidget"><rect codeLine="5" fill="#F1F1F1" height="48" id="SingleChildRenderObjectWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="260" x="7" y="223"/><ellipse cx="22" cy="239" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M24.0781,240.8125 L24.4688,241.7969 L24.0781,241.7969 C23.625,241.7969 23.5156,241.8125 23.3594,241.9219 C23.1094,242.0781 22.9531,242.3594 22.9531,242.6563 C22.9531,242.9219 23.0938,243.1719 23.3125,243.3281 C23.4531,243.4531 23.6563,243.5 24.0781,243.5 L26.4375,243.5 C26.7969,243.5 27.0156,243.4688 27.1563,243.375 C27.4063,243.2344 27.5625,242.9375 27.5625,242.6563 C27.5625,242.375 27.4219,242.125 27.2031,241.9688 C27.0313,241.8281 26.875,241.7969 26.4063,241.7969 L23.0156,233.5938 L19.3438,233.5938 C18.8906,233.5938 18.7656,233.6094 18.6094,233.7031 C18.3594,233.875 18.2031,234.1563 18.2031,234.4375 C18.2031,234.7188 18.3438,234.9688 18.5625,235.1406 C18.7344,235.25 18.9063,235.2813 19.3438,235.2813 L20.4219,235.2813 L17.7813,241.7969 C17.3594,241.7969 17.2031,241.8125 17.0469,241.9219 C16.7969,242.0781 16.6406,242.3594 16.6406,242.6563 C16.6406,243.2188 17.0156,243.5 17.7656,243.5 L20.0313,243.5 C20.3906,243.5 20.6094,243.4688 20.7344,243.375 C21,243.2344 21.1406,242.9375 21.1406,242.6563 C21.1406,242.375 21.0156,242.125 20.7969,241.9531 C20.625,241.8281 20.4844,241.7969 20.0313,241.7969 L19.6406,241.7969 L20.0313,240.8125 L24.0781,240.8125 Z M23.375,239.1094 L20.7031,239.1094 L22.0469,235.8438 L23.375,239.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="228" x="36" y="243.8467">SingleChildRenderObjectWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="266" y1="255" y2="255"/><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="266" y1="263" y2="263"/></g><!--class MultiChildRenderObjectWidget--><g id="elem_MultiChildRenderObjectWidget"><rect codeLine="6" fill="#F1F1F1" height="48" id="MultiChildRenderObjectWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="250" x="302" y="223"/><ellipse cx="317" cy="239" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M319.0781,240.8125 L319.4688,241.7969 L319.0781,241.7969 C318.625,241.7969 318.5156,241.8125 318.3594,241.9219 C318.1094,242.0781 317.9531,242.3594 317.9531,242.6563 C317.9531,242.9219 318.0938,243.1719 318.3125,243.3281 C318.4531,243.4531 318.6563,243.5 319.0781,243.5 L321.4375,243.5 C321.7969,243.5 322.0156,243.4688 322.1563,243.375 C322.4063,243.2344 322.5625,242.9375 322.5625,242.6563 C322.5625,242.375 322.4219,242.125 322.2031,241.9688 C322.0313,241.8281 321.875,241.7969 321.4063,241.7969 L318.0156,233.5938 L314.3438,233.5938 C313.8906,233.5938 313.7656,233.6094 313.6094,233.7031 C313.3594,233.875 313.2031,234.1563 313.2031,234.4375 C313.2031,234.7188 313.3438,234.9688 313.5625,235.1406 C313.7344,235.25 313.9063,235.2813 314.3438,235.2813 L315.4219,235.2813 L312.7813,241.7969 C312.3594,241.7969 312.2031,241.8125 312.0469,241.9219 C311.7969,242.0781 311.6406,242.3594 311.6406,242.6563 C311.6406,243.2188 312.0156,243.5 312.7656,243.5 L315.0313,243.5 C315.3906,243.5 315.6094,243.4688 315.7344,243.375 C316,243.2344 316.1406,242.9375 316.1406,242.6563 C316.1406,242.375 316.0156,242.125 315.7969,241.9531 C315.625,241.8281 315.4844,241.7969 315.0313,241.7969 L314.6406,241.7969 L315.0313,240.8125 L319.0781,240.8125 Z M318.375,239.1094 L315.7031,239.1094 L317.0469,235.8438 L318.375,239.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="218" x="331" y="243.8467">MultiChildRenderObjectWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="303" x2="551" y1="255" y2="255"/><line style="stroke:#181818;stroke-width:0.5;" x1="303" x2="551" y1="263" y2="263"/></g><!--class Flex--><g id="elem_Flex"><rect fill="#F1F1F1" height="48" id="Flex" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="61" x="396.5" y="331"/><ellipse cx="411.5" cy="347" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M413.8438,342.6719 C412.9063,342.2344 412.3125,342.0938 411.4375,342.0938 C408.8125,342.0938 406.8125,344.1719 406.8125,346.8906 L406.8125,348.0156 C406.8125,350.5938 408.9219,352.4844 411.8125,352.4844 C413.0313,352.4844 414.1875,352.1875 414.9375,351.6406 C415.5156,351.2344 415.8438,350.7813 415.8438,350.3906 C415.8438,349.9375 415.4531,349.5469 414.9844,349.5469 C414.7656,349.5469 414.5625,349.625 414.375,349.8125 C413.9219,350.2969 413.9219,350.2969 413.7344,350.3906 C413.3125,350.6563 412.625,350.7813 411.8594,350.7813 C409.8125,350.7813 408.5156,349.6875 408.5156,347.9844 L408.5156,346.8906 C408.5156,345.1094 409.7656,343.7969 411.5,343.7969 C412.0781,343.7969 412.6875,343.9531 413.1563,344.2031 C413.6406,344.4844 413.8125,344.7031 413.9063,345.1094 C413.9688,345.5156 414,345.6406 414.1406,345.7656 C414.2813,345.9063 414.5156,346.0156 414.7344,346.0156 C415,346.0156 415.2656,345.875 415.4375,345.6563 C415.5469,345.5 415.5781,345.3125 415.5781,344.8906 L415.5781,343.4688 C415.5781,343.0313 415.5625,342.9063 415.4688,342.75 C415.3125,342.4844 415.0313,342.3438 414.7344,342.3438 C414.4375,342.3438 414.2344,342.4375 414.0156,342.75 L413.8438,342.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="29" x="425.5" y="351.8467">Flex</text><line style="stroke:#181818;stroke-width:0.5;" x1="397.5" x2="456.5" y1="363" y2="363"/><line style="stroke:#181818;stroke-width:0.5;" x1="397.5" x2="456.5" y1="371" y2="371"/></g><!--class Column--><g id="elem_Column"><rect fill="#F1F1F1" height="48" id="Column" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="86" x="330" y="439"/><ellipse cx="345" cy="455" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M347.3438,450.6719 C346.4063,450.2344 345.8125,450.0938 344.9375,450.0938 C342.3125,450.0938 340.3125,452.1719 340.3125,454.8906 L340.3125,456.0156 C340.3125,458.5938 342.4219,460.4844 345.3125,460.4844 C346.5313,460.4844 347.6875,460.1875 348.4375,459.6406 C349.0156,459.2344 349.3438,458.7813 349.3438,458.3906 C349.3438,457.9375 348.9531,457.5469 348.4844,457.5469 C348.2656,457.5469 348.0625,457.625 347.875,457.8125 C347.4219,458.2969 347.4219,458.2969 347.2344,458.3906 C346.8125,458.6563 346.125,458.7813 345.3594,458.7813 C343.3125,458.7813 342.0156,457.6875 342.0156,455.9844 L342.0156,454.8906 C342.0156,453.1094 343.2656,451.7969 345,451.7969 C345.5781,451.7969 346.1875,451.9531 346.6563,452.2031 C347.1406,452.4844 347.3125,452.7031 347.4063,453.1094 C347.4688,453.5156 347.5,453.6406 347.6406,453.7656 C347.7813,453.9063 348.0156,454.0156 348.2344,454.0156 C348.5,454.0156 348.7656,453.875 348.9375,453.6563 C349.0469,453.5 349.0781,453.3125 349.0781,452.8906 L349.0781,451.4688 C349.0781,451.0313 349.0625,450.9063 348.9688,450.75 C348.8125,450.4844 348.5313,450.3438 348.2344,450.3438 C347.9375,450.3438 347.7344,450.4375 347.5156,450.75 L347.3438,450.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="54" x="359" y="459.8467">Column</text><line style="stroke:#181818;stroke-width:0.5;" x1="331" x2="415" y1="471" y2="471"/><line style="stroke:#181818;stroke-width:0.5;" x1="331" x2="415" y1="479" y2="479"/></g><!--class Row--><g id="elem_Row"><rect fill="#F1F1F1" height="48" id="Row" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="62" x="451" y="439"/><ellipse cx="466" cy="455" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M468.3438,450.6719 C467.4063,450.2344 466.8125,450.0938 465.9375,450.0938 C463.3125,450.0938 461.3125,452.1719 461.3125,454.8906 L461.3125,456.0156 C461.3125,458.5938 463.4219,460.4844 466.3125,460.4844 C467.5313,460.4844 468.6875,460.1875 469.4375,459.6406 C470.0156,459.2344 470.3438,458.7813 470.3438,458.3906 C470.3438,457.9375 469.9531,457.5469 469.4844,457.5469 C469.2656,457.5469 469.0625,457.625 468.875,457.8125 C468.4219,458.2969 468.4219,458.2969 468.2344,458.3906 C467.8125,458.6563 467.125,458.7813 466.3594,458.7813 C464.3125,458.7813 463.0156,457.6875 463.0156,455.9844 L463.0156,454.8906 C463.0156,453.1094 464.2656,451.7969 466,451.7969 C466.5781,451.7969 467.1875,451.9531 467.6563,452.2031 C468.1406,452.4844 468.3125,452.7031 468.4063,453.1094 C468.4688,453.5156 468.5,453.6406 468.6406,453.7656 C468.7813,453.9063 469.0156,454.0156 469.2344,454.0156 C469.5,454.0156 469.7656,453.875 469.9375,453.6563 C470.0469,453.5 470.0781,453.3125 470.0781,452.8906 L470.0781,451.4688 C470.0781,451.0313 470.0625,450.9063 469.9688,450.75 C469.8125,450.4844 469.5313,450.3438 469.2344,450.3438 C468.9375,450.3438 468.7344,450.4375 468.5156,450.75 L468.3438,450.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="30" x="480" y="459.8467">Row</text><line style="stroke:#181818;stroke-width:0.5;" x1="452" x2="512" y1="471" y2="471"/><line style="stroke:#181818;stroke-width:0.5;" x1="452" x2="512" y1="479" y2="479"/></g><!--class StatefulWidget--><g id="elem_StatefulWidget"><rect codeLine="13" fill="#F1F1F1" height="48" id="StatefulWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="137" x="472.5" y="115"/><ellipse cx="487.5" cy="131" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M489.5781,132.8125 L489.9688,133.7969 L489.5781,133.7969 C489.125,133.7969 489.0156,133.8125 488.8594,133.9219 C488.6094,134.0781 488.4531,134.3594 488.4531,134.6563 C488.4531,134.9219 488.5938,135.1719 488.8125,135.3281 C488.9531,135.4531 489.1563,135.5 489.5781,135.5 L491.9375,135.5 C492.2969,135.5 492.5156,135.4688 492.6563,135.375 C492.9063,135.2344 493.0625,134.9375 493.0625,134.6563 C493.0625,134.375 492.9219,134.125 492.7031,133.9688 C492.5313,133.8281 492.375,133.7969 491.9063,133.7969 L488.5156,125.5938 L484.8438,125.5938 C484.3906,125.5938 484.2656,125.6094 484.1094,125.7031 C483.8594,125.875 483.7031,126.1563 483.7031,126.4375 C483.7031,126.7188 483.8438,126.9688 484.0625,127.1406 C484.2344,127.25 484.4063,127.2813 484.8438,127.2813 L485.9219,127.2813 L483.2813,133.7969 C482.8594,133.7969 482.7031,133.8125 482.5469,133.9219 C482.2969,134.0781 482.1406,134.3594 482.1406,134.6563 C482.1406,135.2188 482.5156,135.5 483.2656,135.5 L485.5313,135.5 C485.8906,135.5 486.1094,135.4688 486.2344,135.375 C486.5,135.2344 486.6406,134.9375 486.6406,134.6563 C486.6406,134.375 486.5156,134.125 486.2969,133.9531 C486.125,133.8281 485.9844,133.7969 485.5313,133.7969 L485.1406,133.7969 L485.5313,132.8125 L489.5781,132.8125 Z M488.875,131.1094 L486.2031,131.1094 L487.5469,127.8438 L488.875,131.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="105" x="501.5" y="135.8467">StatefulWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="473.5" x2="608.5" y1="147" y2="147"/><line style="stroke:#181818;stroke-width:0.5;" x1="473.5" x2="608.5" y1="155" y2="155"/></g><!--class StatelessWidget--><g id="elem_StatelessWidget"><rect codeLine="14" fill="#F1F1F1" height="48" id="StatelessWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="146" x="645" y="115"/><ellipse cx="660" cy="131" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M662.0781,132.8125 L662.4688,133.7969 L662.0781,133.7969 C661.625,133.7969 661.5156,133.8125 661.3594,133.9219 C661.1094,134.0781 660.9531,134.3594 660.9531,134.6563 C660.9531,134.9219 661.0938,135.1719 661.3125,135.3281 C661.4531,135.4531 661.6563,135.5 662.0781,135.5 L664.4375,135.5 C664.7969,135.5 665.0156,135.4688 665.1563,135.375 C665.4063,135.2344 665.5625,134.9375 665.5625,134.6563 C665.5625,134.375 665.4219,134.125 665.2031,133.9688 C665.0313,133.8281 664.875,133.7969 664.4063,133.7969 L661.0156,125.5938 L657.3438,125.5938 C656.8906,125.5938 656.7656,125.6094 656.6094,125.7031 C656.3594,125.875 656.2031,126.1563 656.2031,126.4375 C656.2031,126.7188 656.3438,126.9688 656.5625,127.1406 C656.7344,127.25 656.9063,127.2813 657.3438,127.2813 L658.4219,127.2813 L655.7813,133.7969 C655.3594,133.7969 655.2031,133.8125 655.0469,133.9219 C654.7969,134.0781 654.6406,134.3594 654.6406,134.6563 C654.6406,135.2188 655.0156,135.5 655.7656,135.5 L658.0313,135.5 C658.3906,135.5 658.6094,135.4688 658.7344,135.375 C659,135.2344 659.1406,134.9375 659.1406,134.6563 C659.1406,134.375 659.0156,134.125 658.7969,133.9531 C658.625,133.8281 658.4844,133.7969 658.0313,133.7969 L657.6406,133.7969 L658.0313,132.8125 L662.0781,132.8125 Z M661.375,131.1094 L658.7031,131.1094 L660.0469,127.8438 L661.375,131.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="114" x="674" y="135.8467">StatelessWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="646" x2="790" y1="147" y2="147"/><line style="stroke:#181818;stroke-width:0.5;" x1="646" x2="790" y1="155" y2="155"/></g><!--class InheritedWidget--><g id="elem_InheritedWidget"><rect codeLine="15" fill="#F1F1F1" height="48" id="InheritedWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="146" x="814" y="223"/><ellipse cx="829" cy="239" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M831.0781,240.8125 L831.4688,241.7969 L831.0781,241.7969 C830.625,241.7969 830.5156,241.8125 830.3594,241.9219 C830.1094,242.0781 829.9531,242.3594 829.9531,242.6563 C829.9531,242.9219 830.0938,243.1719 830.3125,243.3281 C830.4531,243.4531 830.6563,243.5 831.0781,243.5 L833.4375,243.5 C833.7969,243.5 834.0156,243.4688 834.1563,243.375 C834.4063,243.2344 834.5625,242.9375 834.5625,242.6563 C834.5625,242.375 834.4219,242.125 834.2031,241.9688 C834.0313,241.8281 833.875,241.7969 833.4063,241.7969 L830.0156,233.5938 L826.3438,233.5938 C825.8906,233.5938 825.7656,233.6094 825.6094,233.7031 C825.3594,233.875 825.2031,234.1563 825.2031,234.4375 C825.2031,234.7188 825.3438,234.9688 825.5625,235.1406 C825.7344,235.25 825.9063,235.2813 826.3438,235.2813 L827.4219,235.2813 L824.7813,241.7969 C824.3594,241.7969 824.2031,241.8125 824.0469,241.9219 C823.7969,242.0781 823.6406,242.3594 823.6406,242.6563 C823.6406,243.2188 824.0156,243.5 824.7656,243.5 L827.0313,243.5 C827.3906,243.5 827.6094,243.4688 827.7344,243.375 C828,243.2344 828.1406,242.9375 828.1406,242.6563 C828.1406,242.375 828.0156,242.125 827.7969,241.9531 C827.625,241.8281 827.4844,241.7969 827.0313,241.7969 L826.6406,241.7969 L827.0313,240.8125 L831.0781,240.8125 Z M830.375,239.1094 L827.7031,239.1094 L829.0469,235.8438 L830.375,239.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="114" x="843" y="243.8467">InheritedWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="815" x2="959" y1="255" y2="255"/><line style="stroke:#181818;stroke-width:0.5;" x1="815" x2="959" y1="263" y2="263"/></g><!--class ProxyWidget--><g id="elem_ProxyWidget"><rect codeLine="16" fill="#F1F1F1" height="48" id="ProxyWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="121" x="826.5" y="115"/><ellipse cx="841.5" cy="131" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M843.5781,132.8125 L843.9688,133.7969 L843.5781,133.7969 C843.125,133.7969 843.0156,133.8125 842.8594,133.9219 C842.6094,134.0781 842.4531,134.3594 842.4531,134.6563 C842.4531,134.9219 842.5938,135.1719 842.8125,135.3281 C842.9531,135.4531 843.1563,135.5 843.5781,135.5 L845.9375,135.5 C846.2969,135.5 846.5156,135.4688 846.6563,135.375 C846.9063,135.2344 847.0625,134.9375 847.0625,134.6563 C847.0625,134.375 846.9219,134.125 846.7031,133.9688 C846.5313,133.8281 846.375,133.7969 845.9063,133.7969 L842.5156,125.5938 L838.8438,125.5938 C838.3906,125.5938 838.2656,125.6094 838.1094,125.7031 C837.8594,125.875 837.7031,126.1563 837.7031,126.4375 C837.7031,126.7188 837.8438,126.9688 838.0625,127.1406 C838.2344,127.25 838.4063,127.2813 838.8438,127.2813 L839.9219,127.2813 L837.2813,133.7969 C836.8594,133.7969 836.7031,133.8125 836.5469,133.9219 C836.2969,134.0781 836.1406,134.3594 836.1406,134.6563 C836.1406,135.2188 836.5156,135.5 837.2656,135.5 L839.5313,135.5 C839.8906,135.5 840.1094,135.4688 840.2344,135.375 C840.5,135.2344 840.6406,134.9375 840.6406,134.6563 C840.6406,134.375 840.5156,134.125 840.2969,133.9531 C840.125,133.8281 839.9844,133.7969 839.5313,133.7969 L839.1406,133.7969 L839.5313,132.8125 L843.5781,132.8125 Z M842.875,131.1094 L840.2031,131.1094 L841.5469,127.8438 L842.875,131.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="89" x="855.5" y="135.8467">ProxyWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="827.5" x2="946.5" y1="147" y2="147"/><line style="stroke:#181818;stroke-width:0.5;" x1="827.5" x2="946.5" y1="155" y2="155"/></g><!--class Container--><g id="elem_Container"><rect fill="#F1F1F1" height="48" id="Container" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="103" x="666.5" y="223"/><ellipse cx="681.5" cy="239" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M683.8438,234.6719 C682.9063,234.2344 682.3125,234.0938 681.4375,234.0938 C678.8125,234.0938 676.8125,236.1719 676.8125,238.8906 L676.8125,240.0156 C676.8125,242.5938 678.9219,244.4844 681.8125,244.4844 C683.0313,244.4844 684.1875,244.1875 684.9375,243.6406 C685.5156,243.2344 685.8438,242.7813 685.8438,242.3906 C685.8438,241.9375 685.4531,241.5469 684.9844,241.5469 C684.7656,241.5469 684.5625,241.625 684.375,241.8125 C683.9219,242.2969 683.9219,242.2969 683.7344,242.3906 C683.3125,242.6563 682.625,242.7813 681.8594,242.7813 C679.8125,242.7813 678.5156,241.6875 678.5156,239.9844 L678.5156,238.8906 C678.5156,237.1094 679.7656,235.7969 681.5,235.7969 C682.0781,235.7969 682.6875,235.9531 683.1563,236.2031 C683.6406,236.4844 683.8125,236.7031 683.9063,237.1094 C683.9688,237.5156 684,237.6406 684.1406,237.7656 C684.2813,237.9063 684.5156,238.0156 684.7344,238.0156 C685,238.0156 685.2656,237.875 685.4375,237.6563 C685.5469,237.5 685.5781,237.3125 685.5781,236.8906 L685.5781,235.4688 C685.5781,235.0313 685.5625,234.9063 685.4688,234.75 C685.3125,234.4844 685.0313,234.3438 684.7344,234.3438 C684.4375,234.3438 684.2344,234.4375 684.0156,234.75 L683.8438,234.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="71" x="695.5" y="243.8467">Container</text><line style="stroke:#181818;stroke-width:0.5;" x1="667.5" x2="768.5" y1="255" y2="255"/><line style="stroke:#181818;stroke-width:0.5;" x1="667.5" x2="768.5" y1="263" y2="263"/></g><!--reverse link Widget to RenderObjectWidget--><g id="link_Widget_RenderObjectWidget"><path codeLine="4" d="M571.146,53.7464 C523.944,71.4894 462.787,94.477 408.351,114.939 " fill="none" id="Widget-backto-RenderObjectWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="587.995,47.413,569.0349,48.1301,573.2572,59.3628,587.995,47.413" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderObjectWidget to SingleChildRenderObjectWidget--><g id="link_RenderObjectWidget_SingleChildRenderObjectWidget"><path codeLine="7" d="M285.3641,171.1111 C250.2611,188.8301 218.012,205.108 182.84,222.862 " fill="none" id="RenderObjectWidget-backto-SingleChildRenderObjectWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="301.433,163,282.6604,165.7548,288.0678,176.4674,301.433,163" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderObjectWidget to MultiChildRenderObjectWidget--><g id="link_RenderObjectWidget_MultiChildRenderObjectWidget"><path codeLine="8" d="M375.2024,177.3673 C388.5294,195.0253 396.012,204.941 409.399,222.678 " fill="none" id="RenderObjectWidget-backto-MultiChildRenderObjectWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="364.359,163,370.4133,180.9818,379.9915,173.7528,364.359,163" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link MultiChildRenderObjectWidget to Flex--><g id="link_MultiChildRenderObjectWidget_Flex"><path codeLine="9" d="M427,289 C427,306.658 427,312.941 427,330.678 " fill="none" id="MultiChildRenderObjectWidget-backto-Flex" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="427,271,421,289,433,289,427,271" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Flex to Column--><g id="link_Flex_Column"><path codeLine="10" d="M407.1122,395.0386 C398.1162,412.697 393.917,420.9408 384.881,438.6784 " fill="none" id="Flex-backto-Column" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="415.283,379,401.766,392.315,412.4584,397.7622,415.283,379" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Flex to Row--><g id="link_Flex_Row"><path codeLine="11" d="M447.2238,394.9774 C456.3858,412.6358 460.696,420.9408 469.899,438.6784 " fill="none" id="Flex-backto-Row" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="438.934,379,441.898,397.7407,452.5497,392.2142,438.934,379" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Widget to StatelessWidget--><g id="link_Widget_StatelessWidget"><path codeLine="17" d="M659.8864,68.7853 C674.7124,86.4433 683.526,96.941 698.419,114.678 " fill="none" id="Widget-backto-StatelessWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="648.312,55,655.2913,72.6434,664.4815,64.9271,648.312,55" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Widget to StatefulWidget--><g id="link_Widget_StatefulWidget"><path codeLine="18" d="M598.4076,68.8496 C583.7486,86.5076 575.087,96.941 560.361,114.678 " fill="none" id="Widget-backto-StatefulWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="609.905,55,593.7911,65.0171,603.0241,72.682,609.905,55" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Widget to ProxyWidget--><g id="link_Widget_ProxyWidget"><path codeLine="19" d="M686.8155,55.7537 C730.2065,73.5817 782.198,94.942 830.608,114.831 " fill="none" id="Widget-backto-ProxyWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="670.166,48.913,684.5352,61.3036,689.0957,50.2039,670.166,48.913" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link ProxyWidget to InheritedWidget--><g id="link_ProxyWidget_InheritedWidget"><path codeLine="20" d="M887,181 C887,198.658 887,204.941 887,222.678 " fill="none" id="ProxyWidget-backto-InheritedWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="887,163,881,181,893,181,887,163" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link StatelessWidget to Container--><g id="link_StatelessWidget_Container"><path codeLine="22" d="M718,181 C718,198.658 718,204.941 718,222.678 " fill="none" id="StatelessWidget-backto-Container" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="718,163,712,181,724,181,718,163" style="stroke:#181818;stroke-width:1.0;"/></g><!--SRC=[XP713i8W38RlFCLUO6_WROc91wFP3fxPg1kcGW8bcuaFRnOq8Z2y0EtNzcz-U6_9y86g0RcrrKMA4OWn_fjkGGamf_u60xrB_5NjddMTmz60JgeHePaaYl_5HuSajshJbD-XhB3LLPGgGT- -HrZOUlYmqUZkAaYqUawyx8WJN1rk6BLI16lp-A0cC990vF7PwEMH-Q1uQiA- -uGe71UyFOnNOP78nn95N2emBm00]--></g></svg>

<p>两外还有如下经常使用的Wiget：</p>
<ul>
<li>PreferredSizeWidget继承自Widget，相关子类有AppBar和TabBar；</li>
<li>LayoutBuilder可以根据parent的布局约束来创建合理的布局；</li>
</ul>
<h3 id="StatelessWidget"><a href="#StatelessWidget" class="headerlink" title="StatelessWidget"></a>StatelessWidget</h3><?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="310px" preserveAspectRatio="none" style="width:477px;height:310px;background:#FFFFFF;" version="1.1" viewBox="0 0 477 310" width="477px" zoomAndPan="magnify"><defs/><g><!--class StatelessWidget--><g id="elem_StatelessWidget"><rect codeLine="1" fill="#F1F1F1" height="80.5938" id="StatelessWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="268" x="7" y="223"/><ellipse cx="79.75" cy="239" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M81.8281,240.8125 L82.2188,241.7969 L81.8281,241.7969 C81.375,241.7969 81.2656,241.8125 81.1094,241.9219 C80.8594,242.0781 80.7031,242.3594 80.7031,242.6563 C80.7031,242.9219 80.8438,243.1719 81.0625,243.3281 C81.2031,243.4531 81.4063,243.5 81.8281,243.5 L84.1875,243.5 C84.5469,243.5 84.7656,243.4688 84.9063,243.375 C85.1563,243.2344 85.3125,242.9375 85.3125,242.6563 C85.3125,242.375 85.1719,242.125 84.9531,241.9688 C84.7813,241.8281 84.625,241.7969 84.1563,241.7969 L80.7656,233.5938 L77.0938,233.5938 C76.6406,233.5938 76.5156,233.6094 76.3594,233.7031 C76.1094,233.875 75.9531,234.1563 75.9531,234.4375 C75.9531,234.7188 76.0938,234.9688 76.3125,235.1406 C76.4844,235.25 76.6563,235.2813 77.0938,235.2813 L78.1719,235.2813 L75.5313,241.7969 C75.1094,241.7969 74.9531,241.8125 74.7969,241.9219 C74.5469,242.0781 74.3906,242.3594 74.3906,242.6563 C74.3906,243.2188 74.7656,243.5 75.5156,243.5 L77.7813,243.5 C78.1406,243.5 78.3594,243.4688 78.4844,243.375 C78.75,243.2344 78.8906,242.9375 78.8906,242.6563 C78.8906,242.375 78.7656,242.125 78.5469,241.9531 C78.375,241.8281 78.2344,241.7969 77.7813,241.7969 L77.3906,241.7969 L77.7813,240.8125 L81.8281,240.8125 Z M81.125,239.1094 L78.4531,239.1094 L79.7969,235.8438 L81.125,239.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="114" x="100.25" y="243.8467">StatelessWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="274" y1="255" y2="255"/><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="274" y1="263" y2="263"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="250" x="13" y="279.9951">StatelessElement createElement()</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="256" x="13" y="296.292">Widget build(BuildContext context)</text></g><!--class Element--><g id="elem_Element"><rect codeLine="5" fill="#F1F1F1" height="48" id="Element" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="91" x="219.5" y="7"/><ellipse cx="234.5" cy="23" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M236.5781,24.8125 L236.9688,25.7969 L236.5781,25.7969 C236.125,25.7969 236.0156,25.8125 235.8594,25.9219 C235.6094,26.0781 235.4531,26.3594 235.4531,26.6563 C235.4531,26.9219 235.5938,27.1719 235.8125,27.3281 C235.9531,27.4531 236.1563,27.5 236.5781,27.5 L238.9375,27.5 C239.2969,27.5 239.5156,27.4688 239.6563,27.375 C239.9063,27.2344 240.0625,26.9375 240.0625,26.6563 C240.0625,26.375 239.9219,26.125 239.7031,25.9688 C239.5313,25.8281 239.375,25.7969 238.9063,25.7969 L235.5156,17.5938 L231.8438,17.5938 C231.3906,17.5938 231.2656,17.6094 231.1094,17.7031 C230.8594,17.875 230.7031,18.1563 230.7031,18.4375 C230.7031,18.7188 230.8438,18.9688 231.0625,19.1406 C231.2344,19.25 231.4063,19.2813 231.8438,19.2813 L232.9219,19.2813 L230.2813,25.7969 C229.8594,25.7969 229.7031,25.8125 229.5469,25.9219 C229.2969,26.0781 229.1406,26.3594 229.1406,26.6563 C229.1406,27.2188 229.5156,27.5 230.2656,27.5 L232.5313,27.5 C232.8906,27.5 233.1094,27.4688 233.2344,27.375 C233.5,27.2344 233.6406,26.9375 233.6406,26.6563 C233.6406,26.375 233.5156,26.125 233.2969,25.9531 C233.125,25.8281 232.9844,25.7969 232.5313,25.7969 L232.1406,25.7969 L232.5313,24.8125 L236.5781,24.8125 Z M235.875,23.1094 L233.2031,23.1094 L234.5469,19.8438 L235.875,23.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="59" x="248.5" y="27.8467">Element</text><line style="stroke:#181818;stroke-width:0.5;" x1="220.5" x2="309.5" y1="39" y2="39"/><line style="stroke:#181818;stroke-width:0.5;" x1="220.5" x2="309.5" y1="47" y2="47"/></g><!--class ComponentElement--><g id="elem_ComponentElement"><rect codeLine="8" fill="#F1F1F1" height="48" id="ComponentElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="174" x="281" y="115"/><ellipse cx="296" cy="131" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M298.0781,132.8125 L298.4688,133.7969 L298.0781,133.7969 C297.625,133.7969 297.5156,133.8125 297.3594,133.9219 C297.1094,134.0781 296.9531,134.3594 296.9531,134.6563 C296.9531,134.9219 297.0938,135.1719 297.3125,135.3281 C297.4531,135.4531 297.6563,135.5 298.0781,135.5 L300.4375,135.5 C300.7969,135.5 301.0156,135.4688 301.1563,135.375 C301.4063,135.2344 301.5625,134.9375 301.5625,134.6563 C301.5625,134.375 301.4219,134.125 301.2031,133.9688 C301.0313,133.8281 300.875,133.7969 300.4063,133.7969 L297.0156,125.5938 L293.3438,125.5938 C292.8906,125.5938 292.7656,125.6094 292.6094,125.7031 C292.3594,125.875 292.2031,126.1563 292.2031,126.4375 C292.2031,126.7188 292.3438,126.9688 292.5625,127.1406 C292.7344,127.25 292.9063,127.2813 293.3438,127.2813 L294.4219,127.2813 L291.7813,133.7969 C291.3594,133.7969 291.2031,133.8125 291.0469,133.9219 C290.7969,134.0781 290.6406,134.3594 290.6406,134.6563 C290.6406,135.2188 291.0156,135.5 291.7656,135.5 L294.0313,135.5 C294.3906,135.5 294.6094,135.4688 294.7344,135.375 C295,135.2344 295.1406,134.9375 295.1406,134.6563 C295.1406,134.375 295.0156,134.125 294.7969,133.9531 C294.625,133.8281 294.4844,133.7969 294.0313,133.7969 L293.6406,133.7969 L294.0313,132.8125 L298.0781,132.8125 Z M297.375,131.1094 L294.7031,131.1094 L296.0469,127.8438 L297.375,131.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="142" x="310" y="135.8467">ComponentElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="282" x2="454" y1="147" y2="147"/><line style="stroke:#181818;stroke-width:0.5;" x1="282" x2="454" y1="155" y2="155"/></g><!--class Widget--><g id="elem_Widget"><rect fill="#F1F1F1" height="48" id="Widget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="84" x="120" y="115"/><ellipse cx="135" cy="131" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M137.3438,126.6719 C136.4063,126.2344 135.8125,126.0938 134.9375,126.0938 C132.3125,126.0938 130.3125,128.1719 130.3125,130.8906 L130.3125,132.0156 C130.3125,134.5938 132.4219,136.4844 135.3125,136.4844 C136.5313,136.4844 137.6875,136.1875 138.4375,135.6406 C139.0156,135.2344 139.3438,134.7813 139.3438,134.3906 C139.3438,133.9375 138.9531,133.5469 138.4844,133.5469 C138.2656,133.5469 138.0625,133.625 137.875,133.8125 C137.4219,134.2969 137.4219,134.2969 137.2344,134.3906 C136.8125,134.6563 136.125,134.7813 135.3594,134.7813 C133.3125,134.7813 132.0156,133.6875 132.0156,131.9844 L132.0156,130.8906 C132.0156,129.1094 133.2656,127.7969 135,127.7969 C135.5781,127.7969 136.1875,127.9531 136.6563,128.2031 C137.1406,128.4844 137.3125,128.7031 137.4063,129.1094 C137.4688,129.5156 137.5,129.6406 137.6406,129.7656 C137.7813,129.9063 138.0156,130.0156 138.2344,130.0156 C138.5,130.0156 138.7656,129.875 138.9375,129.6563 C139.0469,129.5 139.0781,129.3125 139.0781,128.8906 L139.0781,127.4688 C139.0781,127.0313 139.0625,126.9063 138.9688,126.75 C138.8125,126.4844 138.5313,126.3438 138.2344,126.3438 C137.9375,126.3438 137.7344,126.4375 137.5156,126.75 L137.3438,126.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="52" x="149" y="135.8467">Widget</text><line style="stroke:#181818;stroke-width:0.5;" x1="121" x2="203" y1="147" y2="147"/><line style="stroke:#181818;stroke-width:0.5;" x1="121" x2="203" y1="155" y2="155"/></g><!--class StatelessElement--><g id="elem_StatelessElement"><rect fill="#F1F1F1" height="48" id="StatelessElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="160" x="310" y="239.5"/><ellipse cx="325" cy="255.5" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M327.3438,251.1719 C326.4063,250.7344 325.8125,250.5938 324.9375,250.5938 C322.3125,250.5938 320.3125,252.6719 320.3125,255.3906 L320.3125,256.5156 C320.3125,259.0938 322.4219,260.9844 325.3125,260.9844 C326.5313,260.9844 327.6875,260.6875 328.4375,260.1406 C329.0156,259.7344 329.3438,259.2813 329.3438,258.8906 C329.3438,258.4375 328.9531,258.0469 328.4844,258.0469 C328.2656,258.0469 328.0625,258.125 327.875,258.3125 C327.4219,258.7969 327.4219,258.7969 327.2344,258.8906 C326.8125,259.1563 326.125,259.2813 325.3594,259.2813 C323.3125,259.2813 322.0156,258.1875 322.0156,256.4844 L322.0156,255.3906 C322.0156,253.6094 323.2656,252.2969 325,252.2969 C325.5781,252.2969 326.1875,252.4531 326.6563,252.7031 C327.1406,252.9844 327.3125,253.2031 327.4063,253.6094 C327.4688,254.0156 327.5,254.1406 327.6406,254.2656 C327.7813,254.4063 328.0156,254.5156 328.2344,254.5156 C328.5,254.5156 328.7656,254.375 328.9375,254.1563 C329.0469,254 329.0781,253.8125 329.0781,253.3906 L329.0781,251.9688 C329.0781,251.5313 329.0625,251.4063 328.9688,251.25 C328.8125,250.9844 328.5313,250.8438 328.2344,250.8438 C327.9375,250.8438 327.7344,250.9375 327.5156,251.25 L327.3438,251.1719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="128" x="339" y="260.3467">StatelessElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="311" x2="469" y1="271.5" y2="271.5"/><line style="stroke:#181818;stroke-width:0.5;" x1="311" x2="469" y1="279.5" y2="279.5"/></g><!--reverse link Widget to StatelessWidget--><g id="link_Widget_StatelessWidget"><path codeLine="10" d="M155.009,180.7823 C152.134,197.5553 151.209,202.95 147.825,222.6881 " fill="none" id="Widget-backto-StatelessWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="158.05,163.041,149.0953,179.7686,160.9228,181.7959,158.05,163.041" style="stroke:#181818;stroke-width:1.0;"/></g><!--link StatelessWidget to StatelessElement--><g id="link_StatelessWidget_StatelessElement"><path codeLine="11" d="M275.227,263.5 C286.734,263.5 292.241,263.5 303.748,263.5 " fill="none" id="StatelessWidget-to-StatelessElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="309.748,263.5,300.748,259.5,304.748,263.5,300.748,267.5,309.748,263.5" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link ComponentElement to StatelessElement--><g id="link_ComponentElement_StatelessElement"><path codeLine="12" d="M375.3194,180.7576 C379.2274,202.5206 381.879,217.281 385.806,239.1455 " fill="none" id="ComponentElement-backto-StatelessElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="372.138,163.041,369.4138,181.8181,381.2249,179.6972,372.138,163.041" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Element to ComponentElement--><g id="link_Element_ComponentElement"><path codeLine="13" d="M299.8932,67.909 C317.0522,85.567 328.103,96.941 345.338,114.678 " fill="none" id="Element-backto-ComponentElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="287.349,55,295.5902,72.0904,304.1962,63.7276,287.349,55" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Element to Widget--><g id="link_Element_Widget"><path codeLine="14" d="M234.2882,63.606 C217.1292,81.264 201.897,96.941 184.662,114.678 " fill="none" id="Element-backto-Widget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="242.651,55,235.6009,56.5154,234.2882,63.606,241.3383,62.0906,242.651,55" style="stroke:#181818;stroke-width:1.0;"/></g><!--SRC=[IqmgBYbAJ2vH22v9B4dDIIqk3izCIKyjKQZcKW02kAXhJcfkQbw9Gd9HAb04ojFG12k2waWgpSn9qN02aSxvUIMf5K3L45gJgvOh4MOHpAHgBcHHv_pSWlmye3XKceiBQgfDZQukkkEuq1shQuVXKYvq4z5CWYb3aSLm1KnM2oW9iGi0]--></g></svg>

<h3 id="StatefulWidget"><a href="#StatefulWidget" class="headerlink" title="StatefulWidget"></a>StatefulWidget</h3><?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="454px" preserveAspectRatio="none" style="width:462px;height:454px;background:#FFFFFF;" version="1.1" viewBox="0 0 462 454" width="462px" zoomAndPan="magnify"><defs/><g><!--class Widget--><g id="elem_Widget"><rect codeLine="1" fill="#F1F1F1" height="64.2969" id="Widget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="195" x="228" y="116"/><ellipse cx="296.25" cy="132" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M298.3281,133.8125 L298.7188,134.7969 L298.3281,134.7969 C297.875,134.7969 297.7656,134.8125 297.6094,134.9219 C297.3594,135.0781 297.2031,135.3594 297.2031,135.6563 C297.2031,135.9219 297.3438,136.1719 297.5625,136.3281 C297.7031,136.4531 297.9063,136.5 298.3281,136.5 L300.6875,136.5 C301.0469,136.5 301.2656,136.4688 301.4063,136.375 C301.6563,136.2344 301.8125,135.9375 301.8125,135.6563 C301.8125,135.375 301.6719,135.125 301.4531,134.9688 C301.2813,134.8281 301.125,134.7969 300.6563,134.7969 L297.2656,126.5938 L293.5938,126.5938 C293.1406,126.5938 293.0156,126.6094 292.8594,126.7031 C292.6094,126.875 292.4531,127.1563 292.4531,127.4375 C292.4531,127.7188 292.5938,127.9688 292.8125,128.1406 C292.9844,128.25 293.1563,128.2813 293.5938,128.2813 L294.6719,128.2813 L292.0313,134.7969 C291.6094,134.7969 291.4531,134.8125 291.2969,134.9219 C291.0469,135.0781 290.8906,135.3594 290.8906,135.6563 C290.8906,136.2188 291.2656,136.5 292.0156,136.5 L294.2813,136.5 C294.6406,136.5 294.8594,136.4688 294.9844,136.375 C295.25,136.2344 295.3906,135.9375 295.3906,135.6563 C295.3906,135.375 295.2656,135.125 295.0469,134.9531 C294.875,134.8281 294.7344,134.7969 294.2813,134.7969 L293.8906,134.7969 L294.2813,133.8125 L298.3281,133.8125 Z M297.625,132.1094 L294.9531,132.1094 L296.2969,128.8438 L297.625,132.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="50" x="316.75" y="136.8467">Widget</text><line style="stroke:#181818;stroke-width:0.5;" x1="229" x2="422" y1="148" y2="148"/><line style="stroke:#181818;stroke-width:0.5;" x1="229" x2="422" y1="156" y2="156"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="183" x="234" y="172.9951">Element createElement()</text></g><!--class StatefulWidget--><g id="elem_StatefulWidget"><rect codeLine="4" fill="#F1F1F1" height="80.5938" id="StatefulWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="253" x="202" y="241"/><ellipse cx="271.75" cy="257" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M273.8281,258.8125 L274.2188,259.7969 L273.8281,259.7969 C273.375,259.7969 273.2656,259.8125 273.1094,259.9219 C272.8594,260.0781 272.7031,260.3594 272.7031,260.6563 C272.7031,260.9219 272.8438,261.1719 273.0625,261.3281 C273.2031,261.4531 273.4063,261.5 273.8281,261.5 L276.1875,261.5 C276.5469,261.5 276.7656,261.4688 276.9063,261.375 C277.1563,261.2344 277.3125,260.9375 277.3125,260.6563 C277.3125,260.375 277.1719,260.125 276.9531,259.9688 C276.7813,259.8281 276.625,259.7969 276.1563,259.7969 L272.7656,251.5938 L269.0938,251.5938 C268.6406,251.5938 268.5156,251.6094 268.3594,251.7031 C268.1094,251.875 267.9531,252.1563 267.9531,252.4375 C267.9531,252.7188 268.0938,252.9688 268.3125,253.1406 C268.4844,253.25 268.6563,253.2813 269.0938,253.2813 L270.1719,253.2813 L267.5313,259.7969 C267.1094,259.7969 266.9531,259.8125 266.7969,259.9219 C266.5469,260.0781 266.3906,260.3594 266.3906,260.6563 C266.3906,261.2188 266.7656,261.5 267.5156,261.5 L269.7813,261.5 C270.1406,261.5 270.3594,261.4688 270.4844,261.375 C270.75,261.2344 270.8906,260.9375 270.8906,260.6563 C270.8906,260.375 270.7656,260.125 270.5469,259.9531 C270.375,259.8281 270.2344,259.7969 269.7813,259.7969 L269.3906,259.7969 L269.7813,258.8125 L273.8281,258.8125 Z M273.125,257.1094 L270.4531,257.1094 L271.7969,253.8438 L273.125,257.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="105" x="292.25" y="261.8467">StatefulWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="203" x2="454" y1="273" y2="273"/><line style="stroke:#181818;stroke-width:0.5;" x1="203" x2="454" y1="281" y2="281"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="241" x="208" y="297.9951">StatefulElement createElement()</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="141" x="208" y="314.292">State createState()</text></g><!--class State--><g id="elem_State"><rect codeLine="10" fill="#F1F1F1" height="48" id="State" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="226" x="215.5" y="399"/><ellipse cx="230.5" cy="415" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M232.5781,416.8125 L232.9688,417.7969 L232.5781,417.7969 C232.125,417.7969 232.0156,417.8125 231.8594,417.9219 C231.6094,418.0781 231.4531,418.3594 231.4531,418.6563 C231.4531,418.9219 231.5938,419.1719 231.8125,419.3281 C231.9531,419.4531 232.1563,419.5 232.5781,419.5 L234.9375,419.5 C235.2969,419.5 235.5156,419.4688 235.6563,419.375 C235.9063,419.2344 236.0625,418.9375 236.0625,418.6563 C236.0625,418.375 235.9219,418.125 235.7031,417.9688 C235.5313,417.8281 235.375,417.7969 234.9063,417.7969 L231.5156,409.5938 L227.8438,409.5938 C227.3906,409.5938 227.2656,409.6094 227.1094,409.7031 C226.8594,409.875 226.7031,410.1563 226.7031,410.4375 C226.7031,410.7188 226.8438,410.9688 227.0625,411.1406 C227.2344,411.25 227.4063,411.2813 227.8438,411.2813 L228.9219,411.2813 L226.2813,417.7969 C225.8594,417.7969 225.7031,417.8125 225.5469,417.9219 C225.2969,418.0781 225.1406,418.3594 225.1406,418.6563 C225.1406,419.2188 225.5156,419.5 226.2656,419.5 L228.5313,419.5 C228.8906,419.5 229.1094,419.4688 229.2344,419.375 C229.5,419.2344 229.6406,418.9375 229.6406,418.6563 C229.6406,418.375 229.5156,418.125 229.2969,417.9531 C229.125,417.8281 228.9844,417.7969 228.5313,417.7969 L228.1406,417.7969 L228.5313,416.8125 L232.5781,416.8125 Z M231.875,415.1094 L229.2031,415.1094 L230.5469,411.8438 L231.875,415.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="37" x="244.5" y="419.8467">State</text><rect fill="#FFFFFF" height="15.9688" style="stroke:#181818;stroke-width:1.0;stroke-dasharray:2.0,2.0;" width="155" x="289.5" y="396"/><text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="153" x="290.5" y="408.1387">T extends StatefulWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="216.5" x2="440.5" y1="431" y2="431"/><line style="stroke:#181818;stroke-width:0.5;" x1="216.5" x2="440.5" y1="439" y2="439"/></g><!--class StatefulElement--><g id="elem_StatefulElement"><rect fill="#F1F1F1" height="48" id="StatefulElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="151" x="16" y="257.5"/><ellipse cx="31" cy="273.5" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M33.3438,269.1719 C32.4063,268.7344 31.8125,268.5938 30.9375,268.5938 C28.3125,268.5938 26.3125,270.6719 26.3125,273.3906 L26.3125,274.5156 C26.3125,277.0938 28.4219,278.9844 31.3125,278.9844 C32.5313,278.9844 33.6875,278.6875 34.4375,278.1406 C35.0156,277.7344 35.3438,277.2813 35.3438,276.8906 C35.3438,276.4375 34.9531,276.0469 34.4844,276.0469 C34.2656,276.0469 34.0625,276.125 33.875,276.3125 C33.4219,276.7969 33.4219,276.7969 33.2344,276.8906 C32.8125,277.1563 32.125,277.2813 31.3594,277.2813 C29.3125,277.2813 28.0156,276.1875 28.0156,274.4844 L28.0156,273.3906 C28.0156,271.6094 29.2656,270.2969 31,270.2969 C31.5781,270.2969 32.1875,270.4531 32.6563,270.7031 C33.1406,270.9844 33.3125,271.2031 33.4063,271.6094 C33.4688,272.0156 33.5,272.1406 33.6406,272.2656 C33.7813,272.4063 34.0156,272.5156 34.2344,272.5156 C34.5,272.5156 34.7656,272.375 34.9375,272.1563 C35.0469,272 35.0781,271.8125 35.0781,271.3906 L35.0781,269.9688 C35.0781,269.5313 35.0625,269.4063 34.9688,269.25 C34.8125,268.9844 34.5313,268.8438 34.2344,268.8438 C33.9375,268.8438 33.7344,268.9375 33.5156,269.25 L33.3438,269.1719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="119" x="45" y="278.3467">StatefulElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="17" x2="166" y1="289.5" y2="289.5"/><line style="stroke:#181818;stroke-width:0.5;" x1="17" x2="166" y1="297.5" y2="297.5"/></g><!--class Element--><g id="elem_Element"><rect codeLine="15" fill="#F1F1F1" height="48" id="Element" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="91" x="161" y="7"/><ellipse cx="176" cy="23" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M178.0781,24.8125 L178.4688,25.7969 L178.0781,25.7969 C177.625,25.7969 177.5156,25.8125 177.3594,25.9219 C177.1094,26.0781 176.9531,26.3594 176.9531,26.6563 C176.9531,26.9219 177.0938,27.1719 177.3125,27.3281 C177.4531,27.4531 177.6563,27.5 178.0781,27.5 L180.4375,27.5 C180.7969,27.5 181.0156,27.4688 181.1563,27.375 C181.4063,27.2344 181.5625,26.9375 181.5625,26.6563 C181.5625,26.375 181.4219,26.125 181.2031,25.9688 C181.0313,25.8281 180.875,25.7969 180.4063,25.7969 L177.0156,17.5938 L173.3438,17.5938 C172.8906,17.5938 172.7656,17.6094 172.6094,17.7031 C172.3594,17.875 172.2031,18.1563 172.2031,18.4375 C172.2031,18.7188 172.3438,18.9688 172.5625,19.1406 C172.7344,19.25 172.9063,19.2813 173.3438,19.2813 L174.4219,19.2813 L171.7813,25.7969 C171.3594,25.7969 171.2031,25.8125 171.0469,25.9219 C170.7969,26.0781 170.6406,26.3594 170.6406,26.6563 C170.6406,27.2188 171.0156,27.5 171.7656,27.5 L174.0313,27.5 C174.3906,27.5 174.6094,27.4688 174.7344,27.375 C175,27.2344 175.1406,26.9375 175.1406,26.6563 C175.1406,26.375 175.0156,26.125 174.7969,25.9531 C174.625,25.8281 174.4844,25.7969 174.0313,25.7969 L173.6406,25.7969 L174.0313,24.8125 L178.0781,24.8125 Z M177.375,23.1094 L174.7031,23.1094 L176.0469,19.8438 L177.375,23.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="59" x="190" y="27.8467">Element</text><line style="stroke:#181818;stroke-width:0.5;" x1="162" x2="251" y1="39" y2="39"/><line style="stroke:#181818;stroke-width:0.5;" x1="162" x2="251" y1="47" y2="47"/></g><!--class ComponentElement--><g id="elem_ComponentElement"><rect fill="#F1F1F1" height="48" id="ComponentElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="179" x="7" y="124"/><ellipse cx="22" cy="140" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M24.3438,135.6719 C23.4063,135.2344 22.8125,135.0938 21.9375,135.0938 C19.3125,135.0938 17.3125,137.1719 17.3125,139.8906 L17.3125,141.0156 C17.3125,143.5938 19.4219,145.4844 22.3125,145.4844 C23.5313,145.4844 24.6875,145.1875 25.4375,144.6406 C26.0156,144.2344 26.3438,143.7813 26.3438,143.3906 C26.3438,142.9375 25.9531,142.5469 25.4844,142.5469 C25.2656,142.5469 25.0625,142.625 24.875,142.8125 C24.4219,143.2969 24.4219,143.2969 24.2344,143.3906 C23.8125,143.6563 23.125,143.7813 22.3594,143.7813 C20.3125,143.7813 19.0156,142.6875 19.0156,140.9844 L19.0156,139.8906 C19.0156,138.1094 20.2656,136.7969 22,136.7969 C22.5781,136.7969 23.1875,136.9531 23.6563,137.2031 C24.1406,137.4844 24.3125,137.7031 24.4063,138.1094 C24.4688,138.5156 24.5,138.6406 24.6406,138.7656 C24.7813,138.9063 25.0156,139.0156 25.2344,139.0156 C25.5,139.0156 25.7656,138.875 25.9375,138.6563 C26.0469,138.5 26.0781,138.3125 26.0781,137.8906 L26.0781,136.4688 C26.0781,136.0313 26.0625,135.9063 25.9688,135.75 C25.8125,135.4844 25.5313,135.3438 25.2344,135.3438 C24.9375,135.3438 24.7344,135.4375 24.5156,135.75 L24.3438,135.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="147" x="36" y="144.8467">ComponentElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="185" y1="156" y2="156"/><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="185" y1="164" y2="164"/></g><!--reverse link Widget to StatefulWidget--><g id="link_Widget_StatefulWidget"><path codeLine="9" d="M326.6212,198.1593 C327.0332,216.2353 327.147,221.191 327.589,240.58 " fill="none" id="Widget-backto-StatefulWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="326.211,180.164,320.6227,198.296,332.6196,198.0226,326.211,180.164" style="stroke:#181818;stroke-width:1.0;"/></g><!--link StatefulWidget to State--><g id="link_StatefulWidget_State"><path codeLine="11" d="M316.874,322.102 C314.905,346.912 314.6115,372.0927 317.8165,392.946 " fill="none" id="StatefulWidget-to-State" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="318.728,398.8764,321.3144,389.3732,317.9685,393.9344,313.4072,390.5885,318.728,398.8764" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link State to StatefulWidget--><g id="link_State_StatefulWidget"><path codeLine="13" d="M340.7742,387.0322 C344.1672,366.1789 342.895,346.912 340.81,322.102 " fill="none" id="State-backto-StatefulWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="338.847,398.8764,343.7587,393.5967,340.7742,387.0322,335.8625,392.3119,338.847,398.8764" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link StatefulElement to State--><g id="link_StatefulElement_State"><path codeLine="12" d="M124.117,313.9687 C144.413,332.8637 166.234,351.0444 196.5,369 C216.039,380.5921 238.583,390.6973 259.447,398.8873 " fill="none" id="StatefulElement-backto-State" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="115.334,305.792,116.9999,312.808,124.117,313.9687,122.4511,306.9527,115.334,305.792" style="stroke:#181818;stroke-width:1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="122" x="197.5" y="365.0669">widget.createState</text></g><!--reverse link Element to Widget--><g id="link_Element_Widget"><path codeLine="16" d="M239.2102,63.6108 C257.2762,81.0688 273.561,96.807 293.331,115.912 " fill="none" id="Element-backto-Widget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="230.581,55.272,232.116,62.3178,239.2102,63.6108,237.6752,56.565,230.581,55.272" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link StatefulElement to StatefulWidget--><g id="link_StatefulElement_StatefulWidget"><path codeLine="17" d="M173.414,281.5 C184.845,281.5 190.277,281.5 201.708,281.5 " fill="none" id="StatefulElement-backto-StatefulWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="167.414,281.5,176.414,285.5,172.414,281.5,176.414,277.5,167.414,281.5" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link ComponentElement to StatefulElement--><g id="link_ComponentElement_StatefulElement"><path codeLine="18" d="M94.9337,190.194 C94.0254,214.083 93.3016,233.117 92.3904,257.083 " fill="none" id="ComponentElement-backto-StatefulElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="95.6176,172.207,88.938,189.966,100.9294,190.422,95.6176,172.207" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Element to ComponentElement--><g id="link_Element_ComponentElement"><path codeLine="19" d="M171.7978,68.2794 C152.7128,88.2314 137.802,103.821 118.727,123.763 " fill="none" id="Element-backto-ComponentElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="184.24,55.272,167.462,64.132,176.1336,72.4268,184.24,55.272" style="stroke:#181818;stroke-width:1.0;"/></g><!--SRC=[TOx12i8m38RlUOeSLQWF8ACNyGaKFDSj4w7hnfQXu7ntIzVQ6R6d9ldovpENWNjJCfvlrPKOdu3-7Imrv1ZBdWnJh5PhU859_97zf1xjrrvg_jl_C74I_Y4NOaunAIMonStYXFHWSjKWE0t2IIaz8o2zDka8xl0UuEr2QCOpb4soIao2PMA4f8MbcfD9TlXnKcEd9etxjkbQvnk9auq4nl8D]--></g></svg>

<h3 id="RenderObjectWidget源码分析"><a href="#RenderObjectWidget源码分析" class="headerlink" title="RenderObjectWidget源码分析"></a>RenderObjectWidget源码分析</h3><?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="438px" preserveAspectRatio="none" style="width:486px;height:438px;background:#FFFFFF;" version="1.1" viewBox="0 0 486 438" width="486px" zoomAndPan="magnify"><defs/><g><!--class BuildContext--><g id="elem_BuildContext"><rect codeLine="1" fill="#F1F1F1" height="48" id="BuildContext" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="123" x="320.5" y="7"/><ellipse cx="335.5" cy="23" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M337.5781,24.8125 L337.9688,25.7969 L337.5781,25.7969 C337.125,25.7969 337.0156,25.8125 336.8594,25.9219 C336.6094,26.0781 336.4531,26.3594 336.4531,26.6563 C336.4531,26.9219 336.5938,27.1719 336.8125,27.3281 C336.9531,27.4531 337.1563,27.5 337.5781,27.5 L339.9375,27.5 C340.2969,27.5 340.5156,27.4688 340.6563,27.375 C340.9063,27.2344 341.0625,26.9375 341.0625,26.6563 C341.0625,26.375 340.9219,26.125 340.7031,25.9688 C340.5313,25.8281 340.375,25.7969 339.9063,25.7969 L336.5156,17.5938 L332.8438,17.5938 C332.3906,17.5938 332.2656,17.6094 332.1094,17.7031 C331.8594,17.875 331.7031,18.1563 331.7031,18.4375 C331.7031,18.7188 331.8438,18.9688 332.0625,19.1406 C332.2344,19.25 332.4063,19.2813 332.8438,19.2813 L333.9219,19.2813 L331.2813,25.7969 C330.8594,25.7969 330.7031,25.8125 330.5469,25.9219 C330.2969,26.0781 330.1406,26.3594 330.1406,26.6563 C330.1406,27.2188 330.5156,27.5 331.2656,27.5 L333.5313,27.5 C333.8906,27.5 334.1094,27.4688 334.2344,27.375 C334.5,27.2344 334.6406,26.9375 334.6406,26.6563 C334.6406,26.375 334.5156,26.125 334.2969,25.9531 C334.125,25.8281 333.9844,25.7969 333.5313,25.7969 L333.1406,25.7969 L333.5313,24.8125 L337.5781,24.8125 Z M336.875,23.1094 L334.2031,23.1094 L335.5469,19.8438 L336.875,23.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="91" x="349.5" y="27.8467">BuildContext</text><line style="stroke:#181818;stroke-width:0.5;" x1="321.5" x2="442.5" y1="39" y2="39"/><line style="stroke:#181818;stroke-width:0.5;" x1="321.5" x2="442.5" y1="47" y2="47"/></g><!--class Widget--><g id="elem_Widget"><rect codeLine="2" fill="#F1F1F1" height="48" id="Widget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="82" x="177" y="7"/><ellipse cx="192" cy="23" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M194.0781,24.8125 L194.4688,25.7969 L194.0781,25.7969 C193.625,25.7969 193.5156,25.8125 193.3594,25.9219 C193.1094,26.0781 192.9531,26.3594 192.9531,26.6563 C192.9531,26.9219 193.0938,27.1719 193.3125,27.3281 C193.4531,27.4531 193.6563,27.5 194.0781,27.5 L196.4375,27.5 C196.7969,27.5 197.0156,27.4688 197.1563,27.375 C197.4063,27.2344 197.5625,26.9375 197.5625,26.6563 C197.5625,26.375 197.4219,26.125 197.2031,25.9688 C197.0313,25.8281 196.875,25.7969 196.4063,25.7969 L193.0156,17.5938 L189.3438,17.5938 C188.8906,17.5938 188.7656,17.6094 188.6094,17.7031 C188.3594,17.875 188.2031,18.1563 188.2031,18.4375 C188.2031,18.7188 188.3438,18.9688 188.5625,19.1406 C188.7344,19.25 188.9063,19.2813 189.3438,19.2813 L190.4219,19.2813 L187.7813,25.7969 C187.3594,25.7969 187.2031,25.8125 187.0469,25.9219 C186.7969,26.0781 186.6406,26.3594 186.6406,26.6563 C186.6406,27.2188 187.0156,27.5 187.7656,27.5 L190.0313,27.5 C190.3906,27.5 190.6094,27.4688 190.7344,27.375 C191,27.2344 191.1406,26.9375 191.1406,26.6563 C191.1406,26.375 191.0156,26.125 190.7969,25.9531 C190.625,25.8281 190.4844,25.7969 190.0313,25.7969 L189.6406,25.7969 L190.0313,24.8125 L194.0781,24.8125 Z M193.375,23.1094 L190.7031,23.1094 L192.0469,19.8438 L193.375,23.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="50" x="206" y="27.8467">Widget</text><line style="stroke:#181818;stroke-width:0.5;" x1="178" x2="258" y1="39" y2="39"/><line style="stroke:#181818;stroke-width:0.5;" x1="178" x2="258" y1="47" y2="47"/></g><!--class Element--><g id="elem_Element"><rect codeLine="3" fill="#F1F1F1" height="48" id="Element" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="91" x="336.5" y="132.5"/><ellipse cx="351.5" cy="148.5" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M353.5781,150.3125 L353.9688,151.2969 L353.5781,151.2969 C353.125,151.2969 353.0156,151.3125 352.8594,151.4219 C352.6094,151.5781 352.4531,151.8594 352.4531,152.1563 C352.4531,152.4219 352.5938,152.6719 352.8125,152.8281 C352.9531,152.9531 353.1563,153 353.5781,153 L355.9375,153 C356.2969,153 356.5156,152.9688 356.6563,152.875 C356.9063,152.7344 357.0625,152.4375 357.0625,152.1563 C357.0625,151.875 356.9219,151.625 356.7031,151.4688 C356.5313,151.3281 356.375,151.2969 355.9063,151.2969 L352.5156,143.0938 L348.8438,143.0938 C348.3906,143.0938 348.2656,143.1094 348.1094,143.2031 C347.8594,143.375 347.7031,143.6563 347.7031,143.9375 C347.7031,144.2188 347.8438,144.4688 348.0625,144.6406 C348.2344,144.75 348.4063,144.7813 348.8438,144.7813 L349.9219,144.7813 L347.2813,151.2969 C346.8594,151.2969 346.7031,151.3125 346.5469,151.4219 C346.2969,151.5781 346.1406,151.8594 346.1406,152.1563 C346.1406,152.7188 346.5156,153 347.2656,153 L349.5313,153 C349.8906,153 350.1094,152.9688 350.2344,152.875 C350.5,152.7344 350.6406,152.4375 350.6406,152.1563 C350.6406,151.875 350.5156,151.625 350.2969,151.4531 C350.125,151.3281 349.9844,151.2969 349.5313,151.2969 L349.1406,151.2969 L349.5313,150.3125 L353.5781,150.3125 Z M352.875,148.6094 L350.2031,148.6094 L351.5469,145.3438 L352.875,148.6094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="59" x="365.5" y="153.3467">Element</text><line style="stroke:#181818;stroke-width:0.5;" x1="337.5" x2="426.5" y1="164.5" y2="164.5"/><line style="stroke:#181818;stroke-width:0.5;" x1="337.5" x2="426.5" y1="172.5" y2="172.5"/></g><!--class RenderObject--><g id="elem_RenderObject"><rect codeLine="4" fill="#F1F1F1" height="48" id="RenderObject" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="130" x="13" y="258"/><ellipse cx="28" cy="274" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M30.0781,275.8125 L30.4688,276.7969 L30.0781,276.7969 C29.625,276.7969 29.5156,276.8125 29.3594,276.9219 C29.1094,277.0781 28.9531,277.3594 28.9531,277.6563 C28.9531,277.9219 29.0938,278.1719 29.3125,278.3281 C29.4531,278.4531 29.6563,278.5 30.0781,278.5 L32.4375,278.5 C32.7969,278.5 33.0156,278.4688 33.1563,278.375 C33.4063,278.2344 33.5625,277.9375 33.5625,277.6563 C33.5625,277.375 33.4219,277.125 33.2031,276.9688 C33.0313,276.8281 32.875,276.7969 32.4063,276.7969 L29.0156,268.5938 L25.3438,268.5938 C24.8906,268.5938 24.7656,268.6094 24.6094,268.7031 C24.3594,268.875 24.2031,269.1563 24.2031,269.4375 C24.2031,269.7188 24.3438,269.9688 24.5625,270.1406 C24.7344,270.25 24.9063,270.2813 25.3438,270.2813 L26.4219,270.2813 L23.7813,276.7969 C23.3594,276.7969 23.2031,276.8125 23.0469,276.9219 C22.7969,277.0781 22.6406,277.3594 22.6406,277.6563 C22.6406,278.2188 23.0156,278.5 23.7656,278.5 L26.0313,278.5 C26.3906,278.5 26.6094,278.4688 26.7344,278.375 C27,278.2344 27.1406,277.9375 27.1406,277.6563 C27.1406,277.375 27.0156,277.125 26.7969,276.9531 C26.625,276.8281 26.4844,276.7969 26.0313,276.7969 L25.6406,276.7969 L26.0313,275.8125 L30.0781,275.8125 Z M29.375,274.1094 L26.7031,274.1094 L28.0469,270.8438 L29.375,274.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="98" x="42" y="278.8467">RenderObject</text><line style="stroke:#181818;stroke-width:0.5;" x1="14" x2="142" y1="290" y2="290"/><line style="stroke:#181818;stroke-width:0.5;" x1="14" x2="142" y1="298" y2="298"/></g><!--class RenderObjectWidget--><g id="elem_RenderObjectWidget"><rect codeLine="6" fill="#F1F1F1" height="80.5938" id="RenderObjectWidget" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="286" x="15" y="116"/><ellipse cx="79.75" cy="132" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M81.8281,133.8125 L82.2188,134.7969 L81.8281,134.7969 C81.375,134.7969 81.2656,134.8125 81.1094,134.9219 C80.8594,135.0781 80.7031,135.3594 80.7031,135.6563 C80.7031,135.9219 80.8438,136.1719 81.0625,136.3281 C81.2031,136.4531 81.4063,136.5 81.8281,136.5 L84.1875,136.5 C84.5469,136.5 84.7656,136.4688 84.9063,136.375 C85.1563,136.2344 85.3125,135.9375 85.3125,135.6563 C85.3125,135.375 85.1719,135.125 84.9531,134.9688 C84.7813,134.8281 84.625,134.7969 84.1563,134.7969 L80.7656,126.5938 L77.0938,126.5938 C76.6406,126.5938 76.5156,126.6094 76.3594,126.7031 C76.1094,126.875 75.9531,127.1563 75.9531,127.4375 C75.9531,127.7188 76.0938,127.9688 76.3125,128.1406 C76.4844,128.25 76.6563,128.2813 77.0938,128.2813 L78.1719,128.2813 L75.5313,134.7969 C75.1094,134.7969 74.9531,134.8125 74.7969,134.9219 C74.5469,135.0781 74.3906,135.3594 74.3906,135.6563 C74.3906,136.2188 74.7656,136.5 75.5156,136.5 L77.7813,136.5 C78.1406,136.5 78.3594,136.4688 78.4844,136.375 C78.75,136.2344 78.8906,135.9375 78.8906,135.6563 C78.8906,135.375 78.7656,135.125 78.5469,134.9531 C78.375,134.8281 78.2344,134.7969 77.7813,134.7969 L77.3906,134.7969 L77.7813,133.8125 L81.8281,133.8125 Z M81.125,132.1094 L78.4531,132.1094 L79.7969,128.8438 L81.125,132.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="148" x="100.25" y="136.8467">RenderObjectWidget</text><line style="stroke:#181818;stroke-width:0.5;" x1="16" x2="300" y1="148" y2="148"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="274" x="21" y="164.9951">RenderObjectElement createElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="16" x2="300" y1="172.2969" y2="172.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="263" x="21" y="189.292">RenderObject createRenderObject()</text></g><!--class ContainerLayer--><g id="elem_ContainerLayer"><rect fill="#F1F1F1" height="48" id="ContainerLayer" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="142" x="7" y="383"/><ellipse cx="22" cy="399" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M24.3438,394.6719 C23.4063,394.2344 22.8125,394.0938 21.9375,394.0938 C19.3125,394.0938 17.3125,396.1719 17.3125,398.8906 L17.3125,400.0156 C17.3125,402.5938 19.4219,404.4844 22.3125,404.4844 C23.5313,404.4844 24.6875,404.1875 25.4375,403.6406 C26.0156,403.2344 26.3438,402.7813 26.3438,402.3906 C26.3438,401.9375 25.9531,401.5469 25.4844,401.5469 C25.2656,401.5469 25.0625,401.625 24.875,401.8125 C24.4219,402.2969 24.4219,402.2969 24.2344,402.3906 C23.8125,402.6563 23.125,402.7813 22.3594,402.7813 C20.3125,402.7813 19.0156,401.6875 19.0156,399.9844 L19.0156,398.8906 C19.0156,397.1094 20.2656,395.7969 22,395.7969 C22.5781,395.7969 23.1875,395.9531 23.6563,396.2031 C24.1406,396.4844 24.3125,396.7031 24.4063,397.1094 C24.4688,397.5156 24.5,397.6406 24.6406,397.7656 C24.7813,397.9063 25.0156,398.0156 25.2344,398.0156 C25.5,398.0156 25.7656,397.875 25.9375,397.6563 C26.0469,397.5 26.0781,397.3125 26.0781,396.8906 L26.0781,395.4688 C26.0781,395.0313 26.0625,394.9063 25.9688,394.75 C25.8125,394.4844 25.5313,394.3438 25.2344,394.3438 C24.9375,394.3438 24.7344,394.4375 24.5156,394.75 L24.3438,394.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="110" x="36" y="403.8467">ContainerLayer</text><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="148" y1="415" y2="415"/><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="148" y1="423" y2="423"/></g><!--class Layer--><g id="elem_Layer"><rect fill="#F1F1F1" height="48" id="Layer" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="71" x="178.5" y="258"/><ellipse cx="193.5" cy="274" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M195.8438,269.6719 C194.9063,269.2344 194.3125,269.0938 193.4375,269.0938 C190.8125,269.0938 188.8125,271.1719 188.8125,273.8906 L188.8125,275.0156 C188.8125,277.5938 190.9219,279.4844 193.8125,279.4844 C195.0313,279.4844 196.1875,279.1875 196.9375,278.6406 C197.5156,278.2344 197.8438,277.7813 197.8438,277.3906 C197.8438,276.9375 197.4531,276.5469 196.9844,276.5469 C196.7656,276.5469 196.5625,276.625 196.375,276.8125 C195.9219,277.2969 195.9219,277.2969 195.7344,277.3906 C195.3125,277.6563 194.625,277.7813 193.8594,277.7813 C191.8125,277.7813 190.5156,276.6875 190.5156,274.9844 L190.5156,273.8906 C190.5156,272.1094 191.7656,270.7969 193.5,270.7969 C194.0781,270.7969 194.6875,270.9531 195.1563,271.2031 C195.6406,271.4844 195.8125,271.7031 195.9063,272.1094 C195.9688,272.5156 196,272.6406 196.1406,272.7656 C196.2813,272.9063 196.5156,273.0156 196.7344,273.0156 C197,273.0156 197.2656,272.875 197.4375,272.6563 C197.5469,272.5 197.5781,272.3125 197.5781,271.8906 L197.5781,270.4688 C197.5781,270.0313 197.5625,269.9063 197.4688,269.75 C197.3125,269.4844 197.0313,269.3438 196.7344,269.3438 C196.4375,269.3438 196.2344,269.4375 196.0156,269.75 L195.8438,269.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="39" x="207.5" y="278.8467">Layer</text><line style="stroke:#181818;stroke-width:0.5;" x1="179.5" x2="248.5" y1="290" y2="290"/><line style="stroke:#181818;stroke-width:0.5;" x1="179.5" x2="248.5" y1="298" y2="298"/></g><!--class PictureLayer--><g id="elem_PictureLayer"><rect fill="#F1F1F1" height="48" id="PictureLayer" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="122" x="184" y="383"/><ellipse cx="199" cy="399" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M201.3438,394.6719 C200.4063,394.2344 199.8125,394.0938 198.9375,394.0938 C196.3125,394.0938 194.3125,396.1719 194.3125,398.8906 L194.3125,400.0156 C194.3125,402.5938 196.4219,404.4844 199.3125,404.4844 C200.5313,404.4844 201.6875,404.1875 202.4375,403.6406 C203.0156,403.2344 203.3438,402.7813 203.3438,402.3906 C203.3438,401.9375 202.9531,401.5469 202.4844,401.5469 C202.2656,401.5469 202.0625,401.625 201.875,401.8125 C201.4219,402.2969 201.4219,402.2969 201.2344,402.3906 C200.8125,402.6563 200.125,402.7813 199.3594,402.7813 C197.3125,402.7813 196.0156,401.6875 196.0156,399.9844 L196.0156,398.8906 C196.0156,397.1094 197.2656,395.7969 199,395.7969 C199.5781,395.7969 200.1875,395.9531 200.6563,396.2031 C201.1406,396.4844 201.3125,396.7031 201.4063,397.1094 C201.4688,397.5156 201.5,397.6406 201.6406,397.7656 C201.7813,397.9063 202.0156,398.0156 202.2344,398.0156 C202.5,398.0156 202.7656,397.875 202.9375,397.6563 C203.0469,397.5 203.0781,397.3125 203.0781,396.8906 L203.0781,395.4688 C203.0781,395.0313 203.0625,394.9063 202.9688,394.75 C202.8125,394.4844 202.5313,394.3438 202.2344,394.3438 C201.9375,394.3438 201.7344,394.4375 201.5156,394.75 L201.3438,394.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="90" x="213" y="403.8467">PictureLayer</text><line style="stroke:#181818;stroke-width:0.5;" x1="185" x2="305" y1="415" y2="415"/><line style="stroke:#181818;stroke-width:0.5;" x1="185" x2="305" y1="423" y2="423"/></g><!--class RenderObjectElement--><g id="elem_RenderObjectElement"><rect fill="#F1F1F1" height="48" id="RenderObjectElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="194" x="285" y="258"/><ellipse cx="300" cy="274" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M302.3438,269.6719 C301.4063,269.2344 300.8125,269.0938 299.9375,269.0938 C297.3125,269.0938 295.3125,271.1719 295.3125,273.8906 L295.3125,275.0156 C295.3125,277.5938 297.4219,279.4844 300.3125,279.4844 C301.5313,279.4844 302.6875,279.1875 303.4375,278.6406 C304.0156,278.2344 304.3438,277.7813 304.3438,277.3906 C304.3438,276.9375 303.9531,276.5469 303.4844,276.5469 C303.2656,276.5469 303.0625,276.625 302.875,276.8125 C302.4219,277.2969 302.4219,277.2969 302.2344,277.3906 C301.8125,277.6563 301.125,277.7813 300.3594,277.7813 C298.3125,277.7813 297.0156,276.6875 297.0156,274.9844 L297.0156,273.8906 C297.0156,272.1094 298.2656,270.7969 300,270.7969 C300.5781,270.7969 301.1875,270.9531 301.6563,271.2031 C302.1406,271.4844 302.3125,271.7031 302.4063,272.1094 C302.4688,272.5156 302.5,272.6406 302.6406,272.7656 C302.7813,272.9063 303.0156,273.0156 303.2344,273.0156 C303.5,273.0156 303.7656,272.875 303.9375,272.6563 C304.0469,272.5 304.0781,272.3125 304.0781,271.8906 L304.0781,270.4688 C304.0781,270.0313 304.0625,269.9063 303.9688,269.75 C303.8125,269.4844 303.5313,269.3438 303.2344,269.3438 C302.9375,269.3438 302.7344,269.4375 302.5156,269.75 L302.3438,269.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="162" x="314" y="278.8467">RenderObjectElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="286" x2="478" y1="290" y2="290"/><line style="stroke:#181818;stroke-width:0.5;" x1="286" x2="478" y1="298" y2="298"/></g><!--reverse link RenderObject to ContainerLayer--><g id="link_RenderObject_ContainerLayer"><path codeLine="11" d="M78,318.135 C78,340.126 78,361.0123 78,382.9684 " fill="none" id="RenderObject-backto-ContainerLayer" style="stroke:#181818;stroke-width:1.0;stroke-dasharray:7.0,7.0;"/><polygon fill="#181818" points="78,306.135,74,312.135,78,318.135,82,312.135,78,306.135" style="stroke:#181818;stroke-width:1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="80" x="79" y="349.0669">LayerHandle</text></g><!--reverse link Layer to ContainerLayer--><g id="link_Layer_ContainerLayer"><path codeLine="12" d="M193.6507,321.7827 C185.4697,336.4607 182.219,339.4638 168,353 C155.917,364.5027 140.896,374.5828 126.608,382.7772 " fill="none" id="Layer-backto-ContainerLayer" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="202.414,306.06,188.4098,318.8616,198.8916,324.7038,202.414,306.06" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Layer to PictureLayer--><g id="link_Layer_PictureLayer"><path codeLine="13" d="M224.2297,323.5893 C229.7717,345.5803 233.662,361.0123 239.195,382.9684 " fill="none" id="Layer-backto-PictureLayer" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="219.831,306.135,218.4116,325.0555,230.0478,322.123,219.831,306.135" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Widget to RenderObjectWidget--><g id="link_Widget_RenderObjectWidget"><path codeLine="16" d="M198.8489,71.4198 C190.5669,88.4688 186.98,95.85 177.26,115.856 " fill="none" id="Widget-backto-RenderObjectWidget" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="206.714,55.229,193.452,68.7981,204.2458,74.0414,206.714,55.229" style="stroke:#181818;stroke-width:1.0;"/></g><!--link Widget to Element--><g id="link_Widget_Element"><path codeLine="17" d="M248.847,55.229 C278.168,77.309 317.2231,106.7196 346.4981,128.7656 " fill="none" id="Widget-to-Element" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="351.291,132.375,346.5079,123.7656,347.2969,129.3672,341.6953,130.1562,351.291,132.375" style="stroke:#181818;stroke-width:1.0;"/></g><!--link RenderObjectWidget to RenderObject--><g id="link_RenderObjectWidget_RenderObject"><path codeLine="18" d="M132.247,197.256 C119.275,217.282 107.2651,235.8222 96.2361,252.8482 " fill="none" id="RenderObjectWidget-to-RenderObject" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="92.9741,257.884,101.2244,252.505,95.6925,253.6875,94.51,248.1556,92.9741,257.884" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Element to RenderObjectElement--><g id="link_Element_RenderObjectElement"><path codeLine="19" d="M382,198.729 C382,220.809 382,235.829 382,257.875 " fill="none" id="Element-backto-RenderObjectElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="382,180.729,376,198.729,388,198.729,382,180.729" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link BuildContext to Element--><g id="link_BuildContext_Element"><path codeLine="20" d="M382,73.229 C382,95.309 382,110.329 382,132.375 " fill="none" id="BuildContext-backto-Element" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="382,55.229,376,73.229,388,73.229,382,55.229" style="stroke:#181818;stroke-width:1.0;"/></g><!--link RenderObjectWidget to RenderObjectElement--><g id="link_RenderObjectWidget_RenderObjectElement"><path codeLine="21" d="M229.799,197.086 C266.27,217.193 304.0437,238.019 335.0277,255.102 " fill="none" id="RenderObjectWidget-to-RenderObjectElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="340.282,257.999,334.3319,250.1507,335.9034,255.5849,330.4692,257.1564,340.282,257.999" style="stroke:#181818;stroke-width:1.0;"/></g><!--SRC=[bP712i8m44Jl-nKvgf1-W8W7HV0WA5uyRvD58ZL2ceAY_hjfayZQzc8kOUSDaqo2PUqTAYzMZQdq-cOztJrWLaz6dudDcugkP9bm9Al9xSiBXU49xt4IOm8NON6GyeHoX9voUj-LC9Scqt0M_9XcHI7Q0cWikHq-o8cvwFOjMbqHH6tnahBdu-HWb6ySHHqWtRn3mqOPIxdyFir8xnPp6NBjGMmEuRyHNN_49-i7]--></g></svg>

<h2 id="Element树"><a href="#Element树" class="headerlink" title="Element树"></a>Element树</h2><p>先看下Element的家族：</p>
<?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="402px" preserveAspectRatio="none" style="width:849px;height:402px;background:#FFFFFF;" version="1.1" viewBox="0 0 849 402" width="849px" zoomAndPan="magnify"><defs/><g><!--class BuildContext--><g id="elem_BuildContext"><rect codeLine="1" fill="#F1F1F1" height="64.2969" id="BuildContext" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="151" x="437" y="7"/><ellipse cx="464.6" cy="23" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M466.6781,24.8125 L467.0688,25.7969 L466.6781,25.7969 C466.225,25.7969 466.1156,25.8125 465.9594,25.9219 C465.7094,26.0781 465.5531,26.3594 465.5531,26.6563 C465.5531,26.9219 465.6938,27.1719 465.9125,27.3281 C466.0531,27.4531 466.2563,27.5 466.6781,27.5 L469.0375,27.5 C469.3969,27.5 469.6156,27.4688 469.7563,27.375 C470.0063,27.2344 470.1625,26.9375 470.1625,26.6563 C470.1625,26.375 470.0219,26.125 469.8031,25.9688 C469.6313,25.8281 469.475,25.7969 469.0063,25.7969 L465.6156,17.5938 L461.9438,17.5938 C461.4906,17.5938 461.3656,17.6094 461.2094,17.7031 C460.9594,17.875 460.8031,18.1563 460.8031,18.4375 C460.8031,18.7188 460.9438,18.9688 461.1625,19.1406 C461.3344,19.25 461.5063,19.2813 461.9438,19.2813 L463.0219,19.2813 L460.3813,25.7969 C459.9594,25.7969 459.8031,25.8125 459.6469,25.9219 C459.3969,26.0781 459.2406,26.3594 459.2406,26.6563 C459.2406,27.2188 459.6156,27.5 460.3656,27.5 L462.6313,27.5 C462.9906,27.5 463.2094,27.4688 463.3344,27.375 C463.6,27.2344 463.7406,26.9375 463.7406,26.6563 C463.7406,26.375 463.6156,26.125 463.3969,25.9531 C463.225,25.8281 463.0844,25.7969 462.6313,25.7969 L462.2406,25.7969 L462.6313,24.8125 L466.6781,24.8125 Z M465.975,23.1094 L463.3031,23.1094 L464.6469,19.8438 L465.975,23.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="91" x="481.4" y="27.8467">BuildContext</text><line style="stroke:#181818;stroke-width:0.5;" x1="438" x2="587" y1="39" y2="39"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="139" x="443" y="55.9951">Widget get widget;</text><line style="stroke:#181818;stroke-width:0.5;" x1="438" x2="587" y1="63.2969" y2="63.2969"/></g><!--class Element--><g id="elem_Element"><rect codeLine="4" fill="#F1F1F1" height="48" id="Element" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="91" x="467" y="131"/><ellipse cx="482" cy="147" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M484.0781,148.8125 L484.4688,149.7969 L484.0781,149.7969 C483.625,149.7969 483.5156,149.8125 483.3594,149.9219 C483.1094,150.0781 482.9531,150.3594 482.9531,150.6563 C482.9531,150.9219 483.0938,151.1719 483.3125,151.3281 C483.4531,151.4531 483.6563,151.5 484.0781,151.5 L486.4375,151.5 C486.7969,151.5 487.0156,151.4688 487.1563,151.375 C487.4063,151.2344 487.5625,150.9375 487.5625,150.6563 C487.5625,150.375 487.4219,150.125 487.2031,149.9688 C487.0313,149.8281 486.875,149.7969 486.4063,149.7969 L483.0156,141.5938 L479.3438,141.5938 C478.8906,141.5938 478.7656,141.6094 478.6094,141.7031 C478.3594,141.875 478.2031,142.1563 478.2031,142.4375 C478.2031,142.7188 478.3438,142.9688 478.5625,143.1406 C478.7344,143.25 478.9063,143.2813 479.3438,143.2813 L480.4219,143.2813 L477.7813,149.7969 C477.3594,149.7969 477.2031,149.8125 477.0469,149.9219 C476.7969,150.0781 476.6406,150.3594 476.6406,150.6563 C476.6406,151.2188 477.0156,151.5 477.7656,151.5 L480.0313,151.5 C480.3906,151.5 480.6094,151.4688 480.7344,151.375 C481,151.2344 481.1406,150.9375 481.1406,150.6563 C481.1406,150.375 481.0156,150.125 480.7969,149.9531 C480.625,149.8281 480.4844,149.7969 480.0313,149.7969 L479.6406,149.7969 L480.0313,148.8125 L484.0781,148.8125 Z M483.375,147.1094 L480.7031,147.1094 L482.0469,143.8438 L483.375,147.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="59" x="496" y="151.8467">Element</text><line style="stroke:#181818;stroke-width:0.5;" x1="468" x2="557" y1="163" y2="163"/><line style="stroke:#181818;stroke-width:0.5;" x1="468" x2="557" y1="171" y2="171"/></g><!--class RenderObjectElement--><g id="elem_RenderObjectElement"><rect codeLine="5" fill="#F1F1F1" height="48" id="RenderObjectElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="189" x="310" y="239"/><ellipse cx="325" cy="255" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M327.0781,256.8125 L327.4688,257.7969 L327.0781,257.7969 C326.625,257.7969 326.5156,257.8125 326.3594,257.9219 C326.1094,258.0781 325.9531,258.3594 325.9531,258.6563 C325.9531,258.9219 326.0938,259.1719 326.3125,259.3281 C326.4531,259.4531 326.6563,259.5 327.0781,259.5 L329.4375,259.5 C329.7969,259.5 330.0156,259.4688 330.1563,259.375 C330.4063,259.2344 330.5625,258.9375 330.5625,258.6563 C330.5625,258.375 330.4219,258.125 330.2031,257.9688 C330.0313,257.8281 329.875,257.7969 329.4063,257.7969 L326.0156,249.5938 L322.3438,249.5938 C321.8906,249.5938 321.7656,249.6094 321.6094,249.7031 C321.3594,249.875 321.2031,250.1563 321.2031,250.4375 C321.2031,250.7188 321.3438,250.9688 321.5625,251.1406 C321.7344,251.25 321.9063,251.2813 322.3438,251.2813 L323.4219,251.2813 L320.7813,257.7969 C320.3594,257.7969 320.2031,257.8125 320.0469,257.9219 C319.7969,258.0781 319.6406,258.3594 319.6406,258.6563 C319.6406,259.2188 320.0156,259.5 320.7656,259.5 L323.0313,259.5 C323.3906,259.5 323.6094,259.4688 323.7344,259.375 C324,259.2344 324.1406,258.9375 324.1406,258.6563 C324.1406,258.375 324.0156,258.125 323.7969,257.9531 C323.625,257.8281 323.4844,257.7969 323.0313,257.7969 L322.6406,257.7969 L323.0313,256.8125 L327.0781,256.8125 Z M326.375,255.1094 L323.7031,255.1094 L325.0469,251.8438 L326.375,255.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="157" x="339" y="259.8467">RenderObjectElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="311" x2="498" y1="271" y2="271"/><line style="stroke:#181818;stroke-width:0.5;" x1="311" x2="498" y1="279" y2="279"/></g><!--class RenderObject--><g id="elem_RenderObject"><rect codeLine="6" fill="#F1F1F1" height="48" id="RenderObject" rx="2.5" ry="2.5" style="stroke:#0000FF;stroke-width:0.5;" width="130" x="144.5" y="239"/><ellipse cx="159.5" cy="255" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M161.5781,256.8125 L161.9688,257.7969 L161.5781,257.7969 C161.125,257.7969 161.0156,257.8125 160.8594,257.9219 C160.6094,258.0781 160.4531,258.3594 160.4531,258.6563 C160.4531,258.9219 160.5938,259.1719 160.8125,259.3281 C160.9531,259.4531 161.1563,259.5 161.5781,259.5 L163.9375,259.5 C164.2969,259.5 164.5156,259.4688 164.6563,259.375 C164.9063,259.2344 165.0625,258.9375 165.0625,258.6563 C165.0625,258.375 164.9219,258.125 164.7031,257.9688 C164.5313,257.8281 164.375,257.7969 163.9063,257.7969 L160.5156,249.5938 L156.8438,249.5938 C156.3906,249.5938 156.2656,249.6094 156.1094,249.7031 C155.8594,249.875 155.7031,250.1563 155.7031,250.4375 C155.7031,250.7188 155.8438,250.9688 156.0625,251.1406 C156.2344,251.25 156.4063,251.2813 156.8438,251.2813 L157.9219,251.2813 L155.2813,257.7969 C154.8594,257.7969 154.7031,257.8125 154.5469,257.9219 C154.2969,258.0781 154.1406,258.3594 154.1406,258.6563 C154.1406,259.2188 154.5156,259.5 155.2656,259.5 L157.5313,259.5 C157.8906,259.5 158.1094,259.4688 158.2344,259.375 C158.5,259.2344 158.6406,258.9375 158.6406,258.6563 C158.6406,258.375 158.5156,258.125 158.2969,257.9531 C158.125,257.8281 157.9844,257.7969 157.5313,257.7969 L157.1406,257.7969 L157.5313,256.8125 L161.5781,256.8125 Z M160.875,255.1094 L158.2031,255.1094 L159.5469,251.8438 L160.875,255.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="98" x="173.5" y="259.8467">RenderObject</text><line style="stroke:#0000FF;stroke-width:0.5;" x1="145.5" x2="273.5" y1="271" y2="271"/><line style="stroke:#0000FF;stroke-width:0.5;" x1="145.5" x2="273.5" y1="279" y2="279"/></g><!--class Widget--><g id="elem_Widget"><rect codeLine="7" fill="#F1F1F1" height="48" id="Widget" rx="2.5" ry="2.5" style="stroke:#0000FF;stroke-width:0.5;" width="82" x="349.5" y="131"/><ellipse cx="364.5" cy="147" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M366.5781,148.8125 L366.9688,149.7969 L366.5781,149.7969 C366.125,149.7969 366.0156,149.8125 365.8594,149.9219 C365.6094,150.0781 365.4531,150.3594 365.4531,150.6563 C365.4531,150.9219 365.5938,151.1719 365.8125,151.3281 C365.9531,151.4531 366.1563,151.5 366.5781,151.5 L368.9375,151.5 C369.2969,151.5 369.5156,151.4688 369.6563,151.375 C369.9063,151.2344 370.0625,150.9375 370.0625,150.6563 C370.0625,150.375 369.9219,150.125 369.7031,149.9688 C369.5313,149.8281 369.375,149.7969 368.9063,149.7969 L365.5156,141.5938 L361.8438,141.5938 C361.3906,141.5938 361.2656,141.6094 361.1094,141.7031 C360.8594,141.875 360.7031,142.1563 360.7031,142.4375 C360.7031,142.7188 360.8438,142.9688 361.0625,143.1406 C361.2344,143.25 361.4063,143.2813 361.8438,143.2813 L362.9219,143.2813 L360.2813,149.7969 C359.8594,149.7969 359.7031,149.8125 359.5469,149.9219 C359.2969,150.0781 359.1406,150.3594 359.1406,150.6563 C359.1406,151.2188 359.5156,151.5 360.2656,151.5 L362.5313,151.5 C362.8906,151.5 363.1094,151.4688 363.2344,151.375 C363.5,151.2344 363.6406,150.9375 363.6406,150.6563 C363.6406,150.375 363.5156,150.125 363.2969,149.9531 C363.125,149.8281 362.9844,149.7969 362.5313,149.7969 L362.1406,149.7969 L362.5313,148.8125 L366.5781,148.8125 Z M365.875,147.1094 L363.2031,147.1094 L364.5469,143.8438 L365.875,147.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="50" x="378.5" y="151.8467">Widget</text><line style="stroke:#0000FF;stroke-width:0.5;" x1="350.5" x2="430.5" y1="163" y2="163"/><line style="stroke:#0000FF;stroke-width:0.5;" x1="350.5" x2="430.5" y1="171" y2="171"/></g><!--class ComponentElement--><g id="elem_ComponentElement"><rect codeLine="8" fill="#F1F1F1" height="48" id="ComponentElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="174" x="534.5" y="239"/><ellipse cx="549.5" cy="255" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M551.5781,256.8125 L551.9688,257.7969 L551.5781,257.7969 C551.125,257.7969 551.0156,257.8125 550.8594,257.9219 C550.6094,258.0781 550.4531,258.3594 550.4531,258.6563 C550.4531,258.9219 550.5938,259.1719 550.8125,259.3281 C550.9531,259.4531 551.1563,259.5 551.5781,259.5 L553.9375,259.5 C554.2969,259.5 554.5156,259.4688 554.6563,259.375 C554.9063,259.2344 555.0625,258.9375 555.0625,258.6563 C555.0625,258.375 554.9219,258.125 554.7031,257.9688 C554.5313,257.8281 554.375,257.7969 553.9063,257.7969 L550.5156,249.5938 L546.8438,249.5938 C546.3906,249.5938 546.2656,249.6094 546.1094,249.7031 C545.8594,249.875 545.7031,250.1563 545.7031,250.4375 C545.7031,250.7188 545.8438,250.9688 546.0625,251.1406 C546.2344,251.25 546.4063,251.2813 546.8438,251.2813 L547.9219,251.2813 L545.2813,257.7969 C544.8594,257.7969 544.7031,257.8125 544.5469,257.9219 C544.2969,258.0781 544.1406,258.3594 544.1406,258.6563 C544.1406,259.2188 544.5156,259.5 545.2656,259.5 L547.5313,259.5 C547.8906,259.5 548.1094,259.4688 548.2344,259.375 C548.5,259.2344 548.6406,258.9375 548.6406,258.6563 C548.6406,258.375 548.5156,258.125 548.2969,257.9531 C548.125,257.8281 547.9844,257.7969 547.5313,257.7969 L547.1406,257.7969 L547.5313,256.8125 L551.5781,256.8125 Z M550.875,255.1094 L548.2031,255.1094 L549.5469,251.8438 L550.875,255.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="142" x="563.5" y="259.8467">ComponentElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="535.5" x2="707.5" y1="271" y2="271"/><line style="stroke:#181818;stroke-width:0.5;" x1="535.5" x2="707.5" y1="279" y2="279"/></g><!--class LeafRenderObjectElement--><g id="elem_LeafRenderObjectElement"><rect fill="#F1F1F1" height="48" id="LeafRenderObjectElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="225" x="7" y="347"/><ellipse cx="22" cy="363" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M24.3438,358.6719 C23.4063,358.2344 22.8125,358.0938 21.9375,358.0938 C19.3125,358.0938 17.3125,360.1719 17.3125,362.8906 L17.3125,364.0156 C17.3125,366.5938 19.4219,368.4844 22.3125,368.4844 C23.5313,368.4844 24.6875,368.1875 25.4375,367.6406 C26.0156,367.2344 26.3438,366.7813 26.3438,366.3906 C26.3438,365.9375 25.9531,365.5469 25.4844,365.5469 C25.2656,365.5469 25.0625,365.625 24.875,365.8125 C24.4219,366.2969 24.4219,366.2969 24.2344,366.3906 C23.8125,366.6563 23.125,366.7813 22.3594,366.7813 C20.3125,366.7813 19.0156,365.6875 19.0156,363.9844 L19.0156,362.8906 C19.0156,361.1094 20.2656,359.7969 22,359.7969 C22.5781,359.7969 23.1875,359.9531 23.6563,360.2031 C24.1406,360.4844 24.3125,360.7031 24.4063,361.1094 C24.4688,361.5156 24.5,361.6406 24.6406,361.7656 C24.7813,361.9063 25.0156,362.0156 25.2344,362.0156 C25.5,362.0156 25.7656,361.875 25.9375,361.6563 C26.0469,361.5 26.0781,361.3125 26.0781,360.8906 L26.0781,359.4688 C26.0781,359.0313 26.0625,358.9063 25.9688,358.75 C25.8125,358.4844 25.5313,358.3438 25.2344,358.3438 C24.9375,358.3438 24.7344,358.4375 24.5156,358.75 L24.3438,358.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="193" x="36" y="367.8467">LeafRenderObjectElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="231" y1="379" y2="379"/><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="231" y1="387" y2="387"/></g><!--class SingleChildRenderObjectElement--><g id="elem_SingleChildRenderObjectElement"><rect fill="#F1F1F1" height="48" id="SingleChildRenderObjectElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="274" x="267.5" y="347"/><ellipse cx="282.5" cy="363" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M284.8438,358.6719 C283.9063,358.2344 283.3125,358.0938 282.4375,358.0938 C279.8125,358.0938 277.8125,360.1719 277.8125,362.8906 L277.8125,364.0156 C277.8125,366.5938 279.9219,368.4844 282.8125,368.4844 C284.0313,368.4844 285.1875,368.1875 285.9375,367.6406 C286.5156,367.2344 286.8438,366.7813 286.8438,366.3906 C286.8438,365.9375 286.4531,365.5469 285.9844,365.5469 C285.7656,365.5469 285.5625,365.625 285.375,365.8125 C284.9219,366.2969 284.9219,366.2969 284.7344,366.3906 C284.3125,366.6563 283.625,366.7813 282.8594,366.7813 C280.8125,366.7813 279.5156,365.6875 279.5156,363.9844 L279.5156,362.8906 C279.5156,361.1094 280.7656,359.7969 282.5,359.7969 C283.0781,359.7969 283.6875,359.9531 284.1563,360.2031 C284.6406,360.4844 284.8125,360.7031 284.9063,361.1094 C284.9688,361.5156 285,361.6406 285.1406,361.7656 C285.2813,361.9063 285.5156,362.0156 285.7344,362.0156 C286,362.0156 286.2656,361.875 286.4375,361.6563 C286.5469,361.5 286.5781,361.3125 286.5781,360.8906 L286.5781,359.4688 C286.5781,359.0313 286.5625,358.9063 286.4688,358.75 C286.3125,358.4844 286.0313,358.3438 285.7344,358.3438 C285.4375,358.3438 285.2344,358.4375 285.0156,358.75 L284.8438,358.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="242" x="296.5" y="367.8467">SingleChildRenderObjectElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="268.5" x2="540.5" y1="379" y2="379"/><line style="stroke:#181818;stroke-width:0.5;" x1="268.5" x2="540.5" y1="387" y2="387"/></g><!--class MultiChildRenderObjectElement--><g id="elem_MultiChildRenderObjectElement"><rect fill="#F1F1F1" height="48" id="MultiChildRenderObjectElement" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="265" x="577" y="347"/><ellipse cx="592" cy="363" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M594.3438,358.6719 C593.4063,358.2344 592.8125,358.0938 591.9375,358.0938 C589.3125,358.0938 587.3125,360.1719 587.3125,362.8906 L587.3125,364.0156 C587.3125,366.5938 589.4219,368.4844 592.3125,368.4844 C593.5313,368.4844 594.6875,368.1875 595.4375,367.6406 C596.0156,367.2344 596.3438,366.7813 596.3438,366.3906 C596.3438,365.9375 595.9531,365.5469 595.4844,365.5469 C595.2656,365.5469 595.0625,365.625 594.875,365.8125 C594.4219,366.2969 594.4219,366.2969 594.2344,366.3906 C593.8125,366.6563 593.125,366.7813 592.3594,366.7813 C590.3125,366.7813 589.0156,365.6875 589.0156,363.9844 L589.0156,362.8906 C589.0156,361.1094 590.2656,359.7969 592,359.7969 C592.5781,359.7969 593.1875,359.9531 593.6563,360.2031 C594.1406,360.4844 594.3125,360.7031 594.4063,361.1094 C594.4688,361.5156 594.5,361.6406 594.6406,361.7656 C594.7813,361.9063 595.0156,362.0156 595.2344,362.0156 C595.5,362.0156 595.7656,361.875 595.9375,361.6563 C596.0469,361.5 596.0781,361.3125 596.0781,360.8906 L596.0781,359.4688 C596.0781,359.0313 596.0625,358.9063 595.9688,358.75 C595.8125,358.4844 595.5313,358.3438 595.2344,358.3438 C594.9375,358.3438 594.7344,358.4375 594.5156,358.75 L594.3438,358.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="233" x="606" y="367.8467">MultiChildRenderObjectElement</text><line style="stroke:#181818;stroke-width:0.5;" x1="578" x2="841" y1="379" y2="379"/><line style="stroke:#181818;stroke-width:0.5;" x1="578" x2="841" y1="387" y2="387"/></g><!--link Widget to Element--><g id="link_Widget_Element"><path codeLine="9" d="M431.961,155 C443.601,155 443.242,155 454.882,155 " fill="none" id="Widget-to-Element" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="466.882,155,460.882,151,454.882,155,460.882,159,466.882,155" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link BuildContext to Element--><g id="link_BuildContext_Element"><path codeLine="10" d="M512.5,89.151 C512.5,108.005 512.5,113.647 512.5,130.845 " fill="none" id="BuildContext-backto-Element" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="512.5,71.151,506.5,89.151,518.5,89.151,512.5,71.151" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Element to RenderObjectElement--><g id="link_Element_RenderObjectElement"><path codeLine="11" d="M476.2194,191.6081 C458.2274,209.2661 446.334,220.941 428.262,238.678 " fill="none" id="Element-backto-RenderObjectElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="489.066,179,472.0167,187.3259,480.4221,195.8903,489.066,179" style="stroke:#181818;stroke-width:1.0;"/></g><!--link RenderObject to RenderObjectElement--><g id="link_RenderObject_RenderObjectElement"><path codeLine="12" d="M274.627,263 C286.38,263 286.133,263 297.885,263 " fill="none" id="RenderObject-to-RenderObjectElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="309.885,263,303.885,259,297.885,263,303.885,267,309.885,263" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderObjectElement to LeafRenderObjectElement--><g id="link_RenderObjectElement_LeafRenderObjectElement"><path codeLine="13" d="M325.7882,293.275 C278.1482,310.9943 229.445,329.1083 181.712,346.8617 " fill="none" id="RenderObjectElement-backto-LeafRenderObjectElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="342.659,287,323.6965,287.6514,327.8798,298.8986,342.659,287" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderObjectElement to SingleChildRenderObjectElement--><g id="link_RenderObjectElement_SingleChildRenderObjectElement"><path codeLine="14" d="M404.5,305 C404.5,322.6584 404.5,328.9408 404.5,346.6784 " fill="none" id="RenderObjectElement-backto-SingleChildRenderObjectElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="404.5,287,398.5,305,410.5,305,404.5,287" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderObjectElement to MultiChildRenderObjectElement--><g id="link_RenderObjectElement_MultiChildRenderObjectElement"><path codeLine="15" d="M487.6824,292.9091 C538.7544,310.6588 592.081,329.1922 643.186,346.9531 " fill="none" id="RenderObjectElement-backto-MultiChildRenderObjectElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="470.68,287,485.7127,298.5766,489.6521,287.2416,470.68,287" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link Element to ComponentElement--><g id="link_Element_ComponentElement"><path codeLine="16" d="M549.0553,191.549 C567.2133,209.207 579.279,220.941 597.518,238.678 " fill="none" id="Element-backto-ComponentElement" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="536.151,179,544.8723,195.8505,553.2384,187.2476,536.151,179" style="stroke:#181818;stroke-width:1.0;"/></g><!--SRC=[IqmgBYbAJ2vHS2hDp4bnpiyhIQqeKQZcKW22yCoKzDGI1H0k1pEjkMgv4c4QN7DISrFpIX02GQbvAQb5_abPgSabU2KLb7CoyrAjad9AKn4AadCIYujXLk9Mu9oVMv2V1pGQPWEKLj3IpKbDAz65ci25uXsR6brT1NGDO45iRiOY1ZSTMGwhGh2fFgc9QSIQ3DOGd9cNdfFgd05qCqdwV4jpIZ9nQaDHYXvm0000]--></g></svg>

<p>从类图可以看出Element是连接Widget和RenderObject的纽带。</p>
<?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="585px" preserveAspectRatio="none" style="width:696px;height:585px;background:#FFFFFF;" version="1.1" viewBox="0 0 696 585" width="696px" zoomAndPan="magnify"><defs/><g><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="80.5" y="67.4297"/><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="80.5" y="154.8281"/><rect fill="#FFFFFF" height="102.5313" style="stroke:#181818;stroke-width:1.0;" width="10" x="80.5" y="271.3594"/><rect fill="#FFFFFF" height="58.2656" style="stroke:#181818;stroke-width:1.0;" width="10" x="237.5" y="96.5625"/><rect fill="#FFFFFF" height="58.2656" style="stroke:#181818;stroke-width:1.0;" width="10" x="237.5" y="213.0938"/><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="237.5" y="503.4219"/><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="500" y="183.9609"/><rect fill="#FFFFFF" height="35.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="500" y="373.8906"/><rect fill="#FFFFFF" height="121.5313" style="stroke:#181818;stroke-width:1.0;" width="10" x="500" y="411.0234"/><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="623" y="445.1563"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="85" x2="85" y1="36.2969" y2="550.5547"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="242" x2="242" y1="36.2969" y2="550.5547"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="430.5" x2="430.5" y1="36.2969" y2="550.5547"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="504.5" x2="504.5" y1="36.2969" y2="550.5547"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="628" x2="628" y1="36.2969" y2="550.5547"/><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="161" x="5" y="5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="147" x="12" y="24.9951">ComponentElement</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="161" x="5" y="549.5547"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="147" x="12" y="569.5498">ComponentElement</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="133" x="176" y="5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="119" x="183" y="24.9951">StatefulElement</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="133" x="176" y="549.5547"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="119" x="183" y="569.5498">StatefulElement</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="54" x="403.5" y="5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="40" x="410.5" y="24.9951">State</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="54" x="403.5" y="549.5547"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="40" x="410.5" y="569.5498">State</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="75" x="467.5" y="5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="61" x="474.5" y="24.9951">Element</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="75" x="467.5" y="549.5547"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="61" x="474.5" y="569.5498">Element</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="124" x="566" y="5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="110" x="573" y="24.9951">StatefulWidget</text><rect fill="#E2E2F0" height="30.2969" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="124" x="566" y="549.5547"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="110" x="573" y="569.5498">StatefulWidget</text><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="80.5" y="67.4297"/><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="80.5" y="154.8281"/><rect fill="#FFFFFF" height="102.5313" style="stroke:#181818;stroke-width:1.0;" width="10" x="80.5" y="271.3594"/><rect fill="#FFFFFF" height="58.2656" style="stroke:#181818;stroke-width:1.0;" width="10" x="237.5" y="96.5625"/><rect fill="#FFFFFF" height="58.2656" style="stroke:#181818;stroke-width:1.0;" width="10" x="237.5" y="213.0938"/><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="237.5" y="503.4219"/><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="500" y="183.9609"/><rect fill="#FFFFFF" height="35.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="500" y="373.8906"/><rect fill="#FFFFFF" height="121.5313" style="stroke:#181818;stroke-width:1.0;" width="10" x="500" y="411.0234"/><rect fill="#FFFFFF" height="29.1328" style="stroke:#181818;stroke-width:1.0;" width="10" x="623" y="445.1563"/><ellipse cx="7.5" cy="66.6797" fill="none" rx="4" ry="4" style="stroke:#181818;stroke-width:1.5;"/><polygon fill="#181818" points="68.5,63.4297,78.5,67.4297,68.5,71.4297,72.5,67.4297" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="12" x2="74.5" y1="67.4297" y2="67.4297"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="42" x="15" y="62.3638">mount</text><polygon fill="#181818" points="225.5,92.5625,235.5,96.5625,225.5,100.5625,229.5,96.5625" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="85.5" x2="231.5" y1="96.5625" y2="96.5625"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="62" x="92.5" y="91.4966">_firstBuild</text><polygon fill="#181818" points="418.5,121.6953,428.5,125.6953,418.5,129.6953,422.5,125.6953" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="247.5" x2="424.5" y1="125.6953" y2="125.6953"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="53" x="254.5" y="120.6294">initState</text><polygon fill="#181818" points="101.5,150.8281,91.5,154.8281,101.5,158.8281,97.5,154.8281" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="95.5" x2="241.5" y1="154.8281" y2="154.8281"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="62" x="107.5" y="149.7622">_firstBuild</text><polygon fill="#181818" points="488,179.9609,498,183.9609,488,187.9609,492,183.9609" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="85.5" x2="494" y1="183.9609" y2="183.9609"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="43" x="92.5" y="178.895">rebuild</text><polygon fill="#181818" points="258.5,209.0938,248.5,213.0938,258.5,217.0938,254.5,213.0938" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="504" y1="213.0938" y2="213.0938"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="99" x="264.5" y="208.0278">performRebuild</text><polygon fill="#181818" points="418.5,238.2266,428.5,242.2266,418.5,246.2266,422.5,242.2266" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="247.5" x2="424.5" y1="242.2266" y2="242.2266"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="159" x="254.5" y="237.1606">didChangeDependencies</text><polygon fill="#181818" points="101.5,267.3594,91.5,271.3594,101.5,275.3594,97.5,271.3594" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="95.5" x2="241.5" y1="271.3594" y2="271.3594"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="99" x="107.5" y="266.2935">performRebuild</text><polygon fill="#181818" points="230.5,296.4922,240.5,300.4922,230.5,304.4922,234.5,300.4922" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="90.5" x2="236.5" y1="300.4922" y2="300.4922"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="30" x="97.5" y="295.4263">build</text><polygon fill="#181818" points="418.5,325.625,428.5,329.625,418.5,333.625,422.5,329.625" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="242.5" x2="424.5" y1="329.625" y2="329.625"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="30" x="249.5" y="324.5591">build</text><polygon fill="#181818" points="488,369.8906,498,373.8906,488,377.8906,492,373.8906" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="85.5" x2="494" y1="373.8906" y2="373.8906"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="76" x="92.5" y="353.6919">updateChild</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="147" x="92.5" y="368.8247">&#26159;widget&#31995;&#32479;&#30340;&#26680;&#24515;&#26041;&#27861;</text><line style="stroke:#181818;stroke-width:1.0;" x1="515" x2="557" y1="403.0234" y2="403.0234"/><line style="stroke:#181818;stroke-width:1.0;" x1="557" x2="557" y1="403.0234" y2="416.0234"/><line style="stroke:#181818;stroke-width:1.0;" x1="516" x2="557" y1="416.0234" y2="416.0234"/><polygon fill="#181818" points="526,412.0234,516,416.0234,526,420.0234,522,416.0234" style="stroke:#181818;stroke-width:1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="85" x="522" y="397.9575">inflateWidget</text><polygon fill="#181818" points="611,441.1563,621,445.1563,611,449.1563,615,445.1563" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="510" x2="617" y1="445.1563" y2="445.1563"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="94" x="517" y="440.0903">createElement</text><polygon fill="#181818" points="253.5,470.2891,243.5,474.2891,253.5,478.2891,249.5,474.2891" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="247.5" x2="627" y1="474.2891" y2="474.2891"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="27" x="259.5" y="469.2231">new</text><polygon fill="#181818" points="258.5,499.4219,248.5,503.4219,258.5,507.4219,254.5,503.4219" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="499" y1="503.4219" y2="503.4219"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="42" x="264.5" y="498.356">mount</text><polygon fill="#181818" points="96.5,528.5547,86.5,532.5547,96.5,536.5547,92.5,532.5547" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="90.5" x2="241.5" y1="532.5547" y2="532.5547"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="42" x="102.5" y="527.4888">mount</text><!--SRC=[ZP8_he904CPxJh6zuG8K5g8NqC924yDZ1vq4Picww07Uky8pnaPlO66ZiV0qmZLSmR-0GhMR-Nupy-tC3eJPPBO8Ga50gkD3e8z6msA1Y4WPUOLfkgSS1LxatqAcUSL77igfQaNeSoC7F78iXeGglPOn-Lx5mcLktc09FobOvJO4wGaPT6_uPyCSkJrnQ0nj284ua8imhMU-qCLn5SvqOe6jCsMBLLdDzEePHI7Nl3tHz93YvNQEV0mgsHsJupfP_SMR_Vdq6oyEyUxV-5G3oVDraNwQMZRjJBcYhWGTkh_qNI_TZyK8vbys-FoSDTUGmHmUyx-RUGdbyou0]--></g></svg>

<h2 id="RenderObject树"><a href="#RenderObject树" class="headerlink" title="RenderObject树"></a>RenderObject树</h2><p>通常情况下RenderObject是由RenderObjectElement创建的，当Element状态变为unmounted时，要销毁RenderObject（调用RenderObject.dispose）。我们一般不会定义RenderObject的子类，而是使用RenderBox（或者RenderProxyBox），RenderBox采用的是笛卡尔坐标系，如果需要创建不是笛卡尔坐标系的布局，则就需要直接继承RenderObject了。</p>
<?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="311px" preserveAspectRatio="none" style="width:707px;height:311px;background:#FFFFFF;" version="1.1" viewBox="0 0 707 311" width="707px" zoomAndPan="magnify"><defs/><g><!--class RenderObject--><g id="elem_RenderObject"><rect codeLine="1" fill="#F1F1F1" height="80.5938" id="RenderObject" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="193" x="349" y="7"/><ellipse cx="392.35" cy="23" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M394.4281,24.8125 L394.8188,25.7969 L394.4281,25.7969 C393.975,25.7969 393.8656,25.8125 393.7094,25.9219 C393.4594,26.0781 393.3031,26.3594 393.3031,26.6563 C393.3031,26.9219 393.4438,27.1719 393.6625,27.3281 C393.8031,27.4531 394.0063,27.5 394.4281,27.5 L396.7875,27.5 C397.1469,27.5 397.3656,27.4688 397.5063,27.375 C397.7563,27.2344 397.9125,26.9375 397.9125,26.6563 C397.9125,26.375 397.7719,26.125 397.5531,25.9688 C397.3813,25.8281 397.225,25.7969 396.7563,25.7969 L393.3656,17.5938 L389.6938,17.5938 C389.2406,17.5938 389.1156,17.6094 388.9594,17.7031 C388.7094,17.875 388.5531,18.1563 388.5531,18.4375 C388.5531,18.7188 388.6938,18.9688 388.9125,19.1406 C389.0844,19.25 389.2563,19.2813 389.6938,19.2813 L390.7719,19.2813 L388.1313,25.7969 C387.7094,25.7969 387.5531,25.8125 387.3969,25.9219 C387.1469,26.0781 386.9906,26.3594 386.9906,26.6563 C386.9906,27.2188 387.3656,27.5 388.1156,27.5 L390.3813,27.5 C390.7406,27.5 390.9594,27.4688 391.0844,27.375 C391.35,27.2344 391.4906,26.9375 391.4906,26.6563 C391.4906,26.375 391.3656,26.125 391.1469,25.9531 C390.975,25.8281 390.8344,25.7969 390.3813,25.7969 L389.9906,25.7969 L390.3813,24.8125 L394.4281,24.8125 Z M393.725,23.1094 L391.0531,23.1094 L392.3969,19.8438 L393.725,23.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="98" x="412.65" y="27.8467">RenderObject</text><line style="stroke:#181818;stroke-width:0.5;" x1="350" x2="541" y1="39" y2="39"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="173" x="355" y="55.9951">RenderObject? _parent;</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="181" x="355" y="72.292">ParentData? parentData;</text><line style="stroke:#181818;stroke-width:0.5;" x1="350" x2="541" y1="79.5938" y2="79.5938"/></g><!--class RenderBox--><g id="elem_RenderBox"><rect codeLine="5" fill="#F1F1F1" height="48" id="RenderBox" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="111" x="266" y="148"/><ellipse cx="281" cy="164" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M283.0781,165.8125 L283.4688,166.7969 L283.0781,166.7969 C282.625,166.7969 282.5156,166.8125 282.3594,166.9219 C282.1094,167.0781 281.9531,167.3594 281.9531,167.6563 C281.9531,167.9219 282.0938,168.1719 282.3125,168.3281 C282.4531,168.4531 282.6563,168.5 283.0781,168.5 L285.4375,168.5 C285.7969,168.5 286.0156,168.4688 286.1563,168.375 C286.4063,168.2344 286.5625,167.9375 286.5625,167.6563 C286.5625,167.375 286.4219,167.125 286.2031,166.9688 C286.0313,166.8281 285.875,166.7969 285.4063,166.7969 L282.0156,158.5938 L278.3438,158.5938 C277.8906,158.5938 277.7656,158.6094 277.6094,158.7031 C277.3594,158.875 277.2031,159.1563 277.2031,159.4375 C277.2031,159.7188 277.3438,159.9688 277.5625,160.1406 C277.7344,160.25 277.9063,160.2813 278.3438,160.2813 L279.4219,160.2813 L276.7813,166.7969 C276.3594,166.7969 276.2031,166.8125 276.0469,166.9219 C275.7969,167.0781 275.6406,167.3594 275.6406,167.6563 C275.6406,168.2188 276.0156,168.5 276.7656,168.5 L279.0313,168.5 C279.3906,168.5 279.6094,168.4688 279.7344,168.375 C280,168.2344 280.1406,167.9375 280.1406,167.6563 C280.1406,167.375 280.0156,167.125 279.7969,166.9531 C279.625,166.8281 279.4844,166.7969 279.0313,166.7969 L278.6406,166.7969 L279.0313,165.8125 L283.0781,165.8125 Z M282.375,164.1094 L279.7031,164.1094 L281.0469,160.8438 L282.375,164.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="79" x="295" y="168.8467">RenderBox</text><line style="stroke:#181818;stroke-width:0.5;" x1="267" x2="376" y1="180" y2="180"/><line style="stroke:#181818;stroke-width:0.5;" x1="267" x2="376" y1="188" y2="188"/></g><!--class RenderProxyBox--><g id="elem_RenderProxyBox"><rect fill="#F1F1F1" height="48" id="RenderProxyBox" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="151" x="7" y="256"/><ellipse cx="22" cy="272" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M24.3438,267.6719 C23.4063,267.2344 22.8125,267.0938 21.9375,267.0938 C19.3125,267.0938 17.3125,269.1719 17.3125,271.8906 L17.3125,273.0156 C17.3125,275.5938 19.4219,277.4844 22.3125,277.4844 C23.5313,277.4844 24.6875,277.1875 25.4375,276.6406 C26.0156,276.2344 26.3438,275.7813 26.3438,275.3906 C26.3438,274.9375 25.9531,274.5469 25.4844,274.5469 C25.2656,274.5469 25.0625,274.625 24.875,274.8125 C24.4219,275.2969 24.4219,275.2969 24.2344,275.3906 C23.8125,275.6563 23.125,275.7813 22.3594,275.7813 C20.3125,275.7813 19.0156,274.6875 19.0156,272.9844 L19.0156,271.8906 C19.0156,270.1094 20.2656,268.7969 22,268.7969 C22.5781,268.7969 23.1875,268.9531 23.6563,269.2031 C24.1406,269.4844 24.3125,269.7031 24.4063,270.1094 C24.4688,270.5156 24.5,270.6406 24.6406,270.7656 C24.7813,270.9063 25.0156,271.0156 25.2344,271.0156 C25.5,271.0156 25.7656,270.875 25.9375,270.6563 C26.0469,270.5 26.0781,270.3125 26.0781,269.8906 L26.0781,268.4688 C26.0781,268.0313 26.0625,267.9063 25.9688,267.75 C25.8125,267.4844 25.5313,267.3438 25.2344,267.3438 C24.9375,267.3438 24.7344,267.4375 24.5156,267.75 L24.3438,267.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="119" x="36" y="276.8467">RenderProxyBox</text><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="157" y1="288" y2="288"/><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="157" y1="296" y2="296"/></g><!--class RenderSliver--><g id="elem_RenderSliver"><rect codeLine="8" fill="#F1F1F1" height="48" id="RenderSliver" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="124" x="508.5" y="148"/><ellipse cx="523.5" cy="164" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M525.5781,165.8125 L525.9688,166.7969 L525.5781,166.7969 C525.125,166.7969 525.0156,166.8125 524.8594,166.9219 C524.6094,167.0781 524.4531,167.3594 524.4531,167.6563 C524.4531,167.9219 524.5938,168.1719 524.8125,168.3281 C524.9531,168.4531 525.1563,168.5 525.5781,168.5 L527.9375,168.5 C528.2969,168.5 528.5156,168.4688 528.6563,168.375 C528.9063,168.2344 529.0625,167.9375 529.0625,167.6563 C529.0625,167.375 528.9219,167.125 528.7031,166.9688 C528.5313,166.8281 528.375,166.7969 527.9063,166.7969 L524.5156,158.5938 L520.8438,158.5938 C520.3906,158.5938 520.2656,158.6094 520.1094,158.7031 C519.8594,158.875 519.7031,159.1563 519.7031,159.4375 C519.7031,159.7188 519.8438,159.9688 520.0625,160.1406 C520.2344,160.25 520.4063,160.2813 520.8438,160.2813 L521.9219,160.2813 L519.2813,166.7969 C518.8594,166.7969 518.7031,166.8125 518.5469,166.9219 C518.2969,167.0781 518.1406,167.3594 518.1406,167.6563 C518.1406,168.2188 518.5156,168.5 519.2656,168.5 L521.5313,168.5 C521.8906,168.5 522.1094,168.4688 522.2344,168.375 C522.5,168.2344 522.6406,167.9375 522.6406,167.6563 C522.6406,167.375 522.5156,167.125 522.2969,166.9531 C522.125,166.8281 521.9844,166.7969 521.5313,166.7969 L521.1406,166.7969 L521.5313,165.8125 L525.5781,165.8125 Z M524.875,164.1094 L522.2031,164.1094 L523.5469,160.8438 L524.875,164.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="92" x="537.5" y="168.8467">RenderSliver</text><line style="stroke:#181818;stroke-width:0.5;" x1="509.5" x2="631.5" y1="180" y2="180"/><line style="stroke:#181818;stroke-width:0.5;" x1="509.5" x2="631.5" y1="188" y2="188"/></g><!--class RenderProxySliver--><g id="elem_RenderProxySliver"><rect codeLine="9" fill="#F1F1F1" height="48" id="RenderProxySliver" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="163" x="537" y="256"/><ellipse cx="552" cy="272" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M554.0781,273.8125 L554.4688,274.7969 L554.0781,274.7969 C553.625,274.7969 553.5156,274.8125 553.3594,274.9219 C553.1094,275.0781 552.9531,275.3594 552.9531,275.6563 C552.9531,275.9219 553.0938,276.1719 553.3125,276.3281 C553.4531,276.4531 553.6563,276.5 554.0781,276.5 L556.4375,276.5 C556.7969,276.5 557.0156,276.4688 557.1563,276.375 C557.4063,276.2344 557.5625,275.9375 557.5625,275.6563 C557.5625,275.375 557.4219,275.125 557.2031,274.9688 C557.0313,274.8281 556.875,274.7969 556.4063,274.7969 L553.0156,266.5938 L549.3438,266.5938 C548.8906,266.5938 548.7656,266.6094 548.6094,266.7031 C548.3594,266.875 548.2031,267.1563 548.2031,267.4375 C548.2031,267.7188 548.3438,267.9688 548.5625,268.1406 C548.7344,268.25 548.9063,268.2813 549.3438,268.2813 L550.4219,268.2813 L547.7813,274.7969 C547.3594,274.7969 547.2031,274.8125 547.0469,274.9219 C546.7969,275.0781 546.6406,275.3594 546.6406,275.6563 C546.6406,276.2188 547.0156,276.5 547.7656,276.5 L550.0313,276.5 C550.3906,276.5 550.6094,276.4688 550.7344,276.375 C551,276.2344 551.1406,275.9375 551.1406,275.6563 C551.1406,275.375 551.0156,275.125 550.7969,274.9531 C550.625,274.8281 550.4844,274.7969 550.0313,274.7969 L549.6406,274.7969 L550.0313,273.8125 L554.0781,273.8125 Z M553.375,272.1094 L550.7031,272.1094 L552.0469,268.8438 L553.375,272.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="131" x="566" y="276.8467">RenderProxySliver</text><line style="stroke:#181818;stroke-width:0.5;" x1="538" x2="699" y1="288" y2="288"/><line style="stroke:#181818;stroke-width:0.5;" x1="538" x2="699" y1="296" y2="296"/></g><!--class RenderShiftedBox--><g id="elem_RenderShiftedBox"><rect codeLine="12" fill="#F1F1F1" height="48" id="RenderShiftedBox" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="161" x="193" y="256"/><ellipse cx="208" cy="272" fill="#A9DCDF" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M210.0781,273.8125 L210.4688,274.7969 L210.0781,274.7969 C209.625,274.7969 209.5156,274.8125 209.3594,274.9219 C209.1094,275.0781 208.9531,275.3594 208.9531,275.6563 C208.9531,275.9219 209.0938,276.1719 209.3125,276.3281 C209.4531,276.4531 209.6563,276.5 210.0781,276.5 L212.4375,276.5 C212.7969,276.5 213.0156,276.4688 213.1563,276.375 C213.4063,276.2344 213.5625,275.9375 213.5625,275.6563 C213.5625,275.375 213.4219,275.125 213.2031,274.9688 C213.0313,274.8281 212.875,274.7969 212.4063,274.7969 L209.0156,266.5938 L205.3438,266.5938 C204.8906,266.5938 204.7656,266.6094 204.6094,266.7031 C204.3594,266.875 204.2031,267.1563 204.2031,267.4375 C204.2031,267.7188 204.3438,267.9688 204.5625,268.1406 C204.7344,268.25 204.9063,268.2813 205.3438,268.2813 L206.4219,268.2813 L203.7813,274.7969 C203.3594,274.7969 203.2031,274.8125 203.0469,274.9219 C202.7969,275.0781 202.6406,275.3594 202.6406,275.6563 C202.6406,276.2188 203.0156,276.5 203.7656,276.5 L206.0313,276.5 C206.3906,276.5 206.6094,276.4688 206.7344,276.375 C207,276.2344 207.1406,275.9375 207.1406,275.6563 C207.1406,275.375 207.0156,275.125 206.7969,274.9531 C206.625,274.8281 206.4844,274.7969 206.0313,274.7969 L205.6406,274.7969 L206.0313,273.8125 L210.0781,273.8125 Z M209.375,272.1094 L206.7031,272.1094 L208.0469,268.8438 L209.375,272.1094 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" lengthAdjust="spacing" textLength="129" x="222" y="276.8467">RenderShiftedBox</text><line style="stroke:#181818;stroke-width:0.5;" x1="194" x2="353" y1="288" y2="288"/><line style="stroke:#181818;stroke-width:0.5;" x1="194" x2="353" y1="296" y2="296"/></g><!--class RenderFlex--><g id="elem_RenderFlex"><rect fill="#F1F1F1" height="48" id="RenderFlex" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="113" x="389" y="256"/><ellipse cx="404" cy="272" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M406.3438,267.6719 C405.4063,267.2344 404.8125,267.0938 403.9375,267.0938 C401.3125,267.0938 399.3125,269.1719 399.3125,271.8906 L399.3125,273.0156 C399.3125,275.5938 401.4219,277.4844 404.3125,277.4844 C405.5313,277.4844 406.6875,277.1875 407.4375,276.6406 C408.0156,276.2344 408.3438,275.7813 408.3438,275.3906 C408.3438,274.9375 407.9531,274.5469 407.4844,274.5469 C407.2656,274.5469 407.0625,274.625 406.875,274.8125 C406.4219,275.2969 406.4219,275.2969 406.2344,275.3906 C405.8125,275.6563 405.125,275.7813 404.3594,275.7813 C402.3125,275.7813 401.0156,274.6875 401.0156,272.9844 L401.0156,271.8906 C401.0156,270.1094 402.2656,268.7969 404,268.7969 C404.5781,268.7969 405.1875,268.9531 405.6563,269.2031 C406.1406,269.4844 406.3125,269.7031 406.4063,270.1094 C406.4688,270.5156 406.5,270.6406 406.6406,270.7656 C406.7813,270.9063 407.0156,271.0156 407.2344,271.0156 C407.5,271.0156 407.7656,270.875 407.9375,270.6563 C408.0469,270.5 408.0781,270.3125 408.0781,269.8906 L408.0781,268.4688 C408.0781,268.0313 408.0625,267.9063 407.9688,267.75 C407.8125,267.4844 407.5313,267.3438 407.2344,267.3438 C406.9375,267.3438 406.7344,267.4375 406.5156,267.75 L406.3438,267.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="81" x="418" y="276.8467">RenderFlex</text><line style="stroke:#181818;stroke-width:0.5;" x1="390" x2="501" y1="288" y2="288"/><line style="stroke:#181818;stroke-width:0.5;" x1="390" x2="501" y1="296" y2="296"/></g><!--reverse link RenderObject to RenderBox--><g id="link_RenderObject_RenderBox"><path codeLine="6" d="M392.4359,100.9223 C372.4939,120.6233 361.92,131.069 344.941,147.843 " fill="none" id="RenderObject-backto-RenderBox" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="405.241,88.272,388.2192,96.654,396.6527,105.1907,405.241,88.272" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderBox to RenderProxyBox--><g id="link_RenderBox_RenderProxyBox"><path codeLine="7" d="M253.1868,203.2979 C213.2358,221.0172 174.699,238.1083 134.67,255.8617 " fill="none" id="RenderBox-backto-RenderProxyBox" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="269.641,196,250.7542,197.8131,255.6194,208.7826,269.641,196" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderObject to RenderSliver--><g id="link_RenderObject_RenderSliver"><path codeLine="10" d="M498.9398,100.8707 C519.0428,120.5717 529.754,131.069 546.87,147.843 " fill="none" id="RenderObject-backto-RenderSliver" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="486.084,88.272,494.7402,105.156,503.1394,96.5855,486.084,88.272" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderSliver to RenderProxySliver--><g id="link_RenderSliver_RenderProxySliver"><path codeLine="11" d="M588.3399,212.3973 C596.3359,230.0557 599.907,237.9408 607.939,255.6784 " fill="none" id="RenderSliver-backto-RenderProxySliver" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="580.915,196,582.8742,214.8722,593.8057,209.9223,580.915,196" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderBox to RenderShiftedBox--><g id="link_RenderBox_RenderShiftedBox"><path codeLine="13" d="M303.6601,212.3973 C295.6641,230.0557 292.093,237.9408 284.061,255.6784 " fill="none" id="RenderBox-backto-RenderShiftedBox" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="311.085,196,298.1943,209.9223,309.1258,214.8722,311.085,196" style="stroke:#181818;stroke-width:1.0;"/></g><!--reverse link RenderBox to RenderFlex--><g id="link_RenderBox_RenderFlex"><path codeLine="14" d="M362.0882,207.6961 C382.7452,225.3545 397.468,237.9408 418.218,255.6784 " fill="none" id="RenderBox-backto-RenderFlex" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="348.406,196,358.1895,212.2568,365.9869,203.1353,348.406,196" style="stroke:#181818;stroke-width:1.0;"/></g><!--SRC=[IqmgBYbAJ2vH24hDIqajya_AIWLoghaKW01Po5uXlY2nA3Mln1ei5G1ckoIM9Deh5C3PrborN8ce1ZhbLt2X66rJewkB8GTa8Ki45ELNL89aqGmBpiaiIor25mMhXahXiWf56iB1i12xwS4PcMabgIautKf8tYqdjG80]--></g></svg>

<p>大部分的 Flutter widget 是由一个继承了 RenderBox 的子类的对象渲染的，它们呈现出的 RenderObject 会在二维笛卡尔空间中拥有固定的大小。 RenderBox 提供了 盒子限制模型，为每个 widget 关联了渲染的最小和最大的宽度和高度。</p>
<ul>
<li>RenderParagraph继承自RenderBox，用于渲染文本；</li>
<li>RenderImage也是继承自RenderBox，用于渲染图片；</li>
<li>RenderTransform继承自RenderProxyBox，用于在绘制子节点内容前应用变换；</li>
<li>RenderView是render tree的根节点，直接继承自RenderObject。RenderView只有一个孩子节点RenderBox。</li>
<li>RenderProxyBoxWithHitTestBehavior继承自RenderProxyBox，我们自定义widget是可以用这个，这个组件允许自定义hit-testing行为，比如HitTestBehavior.deferToChild；</li>
</ul>
<h2 id="三棵树的生成过程"><a href="#三棵树的生成过程" class="headerlink" title="三棵树的生成过程"></a>三棵树的生成过程</h2><h3 id="RootWidget创建过程"><a href="#RootWidget创建过程" class="headerlink" title="RootWidget创建过程"></a>RootWidget创建过程</h3><pre class="mermaid">

zenuml
WidgetsBinding.wrapWithDefaultView {

}
WidgetsBinding.scheduleAttachRootWidget {
    &quot;异步执行attachRootWidget&quot;
}
WidgetsBinding.attachRootWidget {
    new RootWidget
    attachToBuildOwner {
        RootWidget.attach {
            new RootElement
            RootElement.assignOwner
            BuildOwner.buildScope {
                RootElement.&quot;callback执行mount&quot; {
                    _rebuild {
                        &quot;Element.updateChild&quot;
                    }
                }
                &quot;首次build _dirtyElements为空&quot;
            }
        }
    }
}
</pre>

<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> runApp(Widget app) &#123; <span class="comment">//app就是用户组装的widget配置信息</span></span><br><span class="line">  <span class="keyword">final</span> WidgetsBinding binding = WidgetsFlutterBinding.ensureInitialized();</span><br><span class="line">  <span class="comment">//1. wrapWithDefaultView(app)会给app在加一个parent，这个parent就是View，View继承自StatelessWidget</span></span><br><span class="line">  <span class="comment">//2. scheduleAttachRootWidget异步调用attachRootWidget(rootWidget)</span></span><br><span class="line">  <span class="comment">//3. scheduleWarmUpFrame立马进行帧刷新，而不会等待Vsync信号</span></span><br><span class="line">  binding</span><br><span class="line">    ..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))</span><br><span class="line">    ..scheduleWarmUpFrame();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//WidgetsBinding</span></span><br><span class="line"><span class="keyword">void</span> attachToBuildOwner(RootWidget widget) &#123;</span><br><span class="line">  <span class="keyword">final</span> <span class="built_in">bool</span> isBootstrapFrame = rootElement == <span class="keyword">null</span>;</span><br><span class="line">  _readyToProduceFrames = <span class="keyword">true</span>;</span><br><span class="line">  <span class="comment">//RootWidget.attach会创建RootElement，并执行RootElement.mount，RootElement的parent为null</span></span><br><span class="line">  _rootElement = widget.attach(buildOwner!, rootElement <span class="keyword">as</span> RootElement?);</span><br><span class="line">  <span class="keyword">if</span> (isBootstrapFrame) &#123;</span><br><span class="line">    SchedulerBinding.instance.ensureVisualUpdate();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Element的根是RootElement，RootElement的mount就是创建Element树的起点：</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Element?</span> updateChild(<span class="built_in">Element?</span> child, Widget? newWidget, <span class="built_in">Object?</span> newSlot) &#123;</span><br><span class="line">  <span class="keyword">if</span> (newWidget == <span class="keyword">null</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (child != <span class="keyword">null</span>) &#123; </span><br><span class="line">      <span class="comment">//1. newWidget为空，child不为空，则将child从树中删除</span></span><br><span class="line">      <span class="comment">//deactivateChild(child)会执行下面语句：</span></span><br><span class="line">      <span class="comment">//a) child._parent = null;   从Element树中删除</span></span><br><span class="line">      <span class="comment">//b) child.detachRenderObject();  //render树中删除</span></span><br><span class="line">      <span class="comment">//c) owner!._inactiveElements.add(child);  添加到列表中最终会执行child.deactivate()</span></span><br><span class="line">      deactivateChild(child);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//2. newWidget和child都为空，直接返回</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">final</span> <span class="built_in">Element</span> newChild;</span><br><span class="line">  <span class="keyword">if</span> (child != <span class="keyword">null</span>) &#123; <span class="comment">//3. newWidget和child都不为空</span></span><br><span class="line">    <span class="keyword">if</span> (child.widget == newWidget) &#123; <span class="comment">//3.1 widget是相同的实例，比如用const修饰的Widget</span></span><br><span class="line">      <span class="keyword">if</span> (child.slot != newSlot) &#123;</span><br><span class="line">        <span class="comment">//只有具备多个child的Element才给child分配slot，只有单个child的slog始终为null。</span></span><br><span class="line">        <span class="comment">//比如MultiChildRenderObjectElement.mount方法中会给每个child生成一个IndexedSlot</span></span><br><span class="line">        updateSlotForChild(child, newSlot);</span><br><span class="line">      &#125;</span><br><span class="line">      newChild = child; <span class="comment">//复用原来的Element</span></span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (Widget.canUpdate(child.widget, newWidget)) &#123; <span class="comment">//3.2 判断runtimeType和key是否都相同</span></span><br><span class="line">      <span class="keyword">if</span> (child.slot != newSlot) &#123;</span><br><span class="line">        updateSlotForChild(child, newSlot);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">//newWidget会赋值给Element._widget，不同Element还有自己的实现：</span></span><br><span class="line">      <span class="comment">//* SingleChildRenderObjectElement.update中会继续执行updateChild</span></span><br><span class="line">      <span class="comment">//* MultiChildRenderObjectElement.update中执行updateChildren，会对比新旧两个列表，然后根据情况执行更新、删除、插入等操作</span></span><br><span class="line">      child.update(newWidget);</span><br><span class="line">      newChild = child;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123; <span class="comment">//3.3 widget变成了完全不同的widget</span></span><br><span class="line">      deactivateChild(child); <span class="comment">//从树中删除老的Element和RenderObject</span></span><br><span class="line">      newChild = inflateWidget(newWidget, newSlot);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123; <span class="comment">//4. newWidget不为空，child为空，要添加新的child</span></span><br><span class="line">    newChild = inflateWidget(newWidget, newSlot);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> newChild;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在RootWidget首次执行mount时，走的是第4分支（newWidget不为空，child为空）。</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Element</span> inflateWidget(Widget newWidget, <span class="built_in">Object?</span> newSlot) &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">final</span> Key? key = newWidget.key;</span><br><span class="line">    <span class="keyword">if</span> (key <span class="keyword">is</span> GlobalKey) &#123;</span><br><span class="line">      <span class="comment">//取出GlobalKey关联的Element，如果还未关联或者Widget.canUpdate为false，则返回null。否则Element会从原来的树种摘除</span></span><br><span class="line">      <span class="keyword">final</span> <span class="built_in">Element?</span> newChild = _retakeInactiveElement(key, newWidget);</span><br><span class="line">      <span class="keyword">if</span> (newChild != <span class="keyword">null</span>) &#123;</span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">          newChild._activateWithParent(<span class="keyword">this</span>, newSlot);</span><br><span class="line">        &#125; <span class="keyword">catch</span> (_) &#123;</span><br><span class="line">          ......</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//GlobalKey关联的Element可以复用，则执行updateChild</span></span><br><span class="line">        <span class="keyword">final</span> <span class="built_in">Element?</span> updatedChild = updateChild(newChild, newWidget, newSlot);</span><br><span class="line">        <span class="keyword">return</span> updatedChild!;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//创建新Element，比如StatefulWidget.createElement()</span></span><br><span class="line">    <span class="keyword">final</span> <span class="built_in">Element</span> newChild = newWidget.createElement();</span><br><span class="line">    <span class="comment">//新的Element挂载到parent(this)上</span></span><br><span class="line">    newChild.mount(<span class="keyword">this</span>, newSlot);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> newChild;</span><br><span class="line">  &#125; <span class="keyword">finally</span> &#123;...&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="Element-mount"><a href="#Element-mount" class="headerlink" title="Element.mount"></a>Element.mount</h3><p>下面是Element.mount的代码实现：</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> mount(<span class="built_in">Element?</span> parent, <span class="built_in">Object?</span> newSlot) &#123;</span><br><span class="line">  _parent = parent;</span><br><span class="line">  _slot = newSlot;</span><br><span class="line">  _lifecycleState = _ElementLifecycle.active;</span><br><span class="line">  _depth = _parent != <span class="keyword">null</span> ? _parent!.depth + <span class="number">1</span> : <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">if</span> (parent != <span class="keyword">null</span>) &#123;</span><br><span class="line">    <span class="comment">// Only assign ownership if the parent is non-null. If parent is null</span></span><br><span class="line">    <span class="comment">// (the root node), the owner should have already been assigned.</span></span><br><span class="line">    <span class="comment">// See RootRenderObjectElement.assignOwner().</span></span><br><span class="line">    _owner = parent.owner;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">final</span> Key? key = widget.key;</span><br><span class="line">  <span class="keyword">if</span> (key <span class="keyword">is</span> GlobalKey) &#123;</span><br><span class="line">    owner!._registerGlobalKey(key, <span class="keyword">this</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  _updateInheritance();  <span class="comment">//_inheritedElements = _parent?._inheritedElements;</span></span><br><span class="line">  attachNotificationTree();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Element.mount默认实现是更新_parent/_slot等。除了默认实现外，其他子类Element都会有自己的实现。</p>
<h4 id="ComponentElement"><a href="#ComponentElement" class="headerlink" title="ComponentElement"></a>ComponentElement</h4><p>ComponentElement是一个组合类，本身不会产生RenderObject。</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//ComponentElement</span></span><br><span class="line">  <span class="meta">@override</span></span><br><span class="line">  <span class="keyword">void</span> mount(<span class="built_in">Element?</span> parent, <span class="built_in">Object?</span> newSlot) &#123;</span><br><span class="line">    <span class="keyword">super</span>.mount(parent, newSlot);</span><br><span class="line">    _firstBuild();</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">void</span> _firstBuild() &#123; <span class="comment">//StatefulElement会重写_firstBuild来执行didChangeDependencies</span></span><br><span class="line">    rebuild(); <span class="comment">// 最终会调用performRebuild.</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">void</span> performRebuild() &#123;</span><br><span class="line">    Widget? built;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      built = build(); <span class="comment">//执行StatelessWidget.build或者State&lt;StatefulWidget&gt;.build，用来创建一个newWidget传给updateChild</span></span><br><span class="line">    &#125; <span class="keyword">catch</span> (e, stack) &#123; ... &#125;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="comment">//将新build的newWidget</span></span><br><span class="line">      _child = updateChild(_child, built, slot);</span><br><span class="line">    &#125; <span class="keyword">catch</span> (e, stack) &#123; ... &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="SingleChildRenderObjectElement"><a href="#SingleChildRenderObjectElement" class="headerlink" title="SingleChildRenderObjectElement"></a>SingleChildRenderObjectElement</h4><p>SingleChildRenderObjectElement继承自RenderObjectElement，会创建自己的RenderObject。</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//SingleChildRenderObjectElement</span></span><br><span class="line">  <span class="keyword">void</span> mount(<span class="built_in">Element?</span> parent, <span class="built_in">Object?</span> newSlot) &#123;</span><br><span class="line">    <span class="keyword">super</span>.mount(parent, newSlot); <span class="comment">//RenderObjectElement.mount</span></span><br><span class="line">    _child = updateChild(_child, (widget <span class="keyword">as</span> SingleChildRenderObjectWidget).child, <span class="keyword">null</span>);</span><br><span class="line">  &#125;</span><br><span class="line"><span class="comment">//RenderObjectElement</span></span><br><span class="line">  <span class="keyword">void</span> mount(<span class="built_in">Element?</span> parent, <span class="built_in">Object?</span> newSlot) &#123;</span><br><span class="line">    <span class="keyword">super</span>.mount(parent, newSlot); <span class="comment">//调用Element.mount，更新_parent等信息</span></span><br><span class="line">    _renderObject = (widget <span class="keyword">as</span> RenderObjectWidget).createRenderObject(<span class="keyword">this</span>);  <span class="comment">//创建RenderObject</span></span><br><span class="line">    <span class="comment">//attachRenderObject会把新创建的RenderObject挂载到render tree中；</span></span><br><span class="line">    <span class="comment">//但当前Element的parent不一定是RenderObjectElement，因此会从Element树中向上找最近的RenderObjectElement进行挂载，</span></span><br><span class="line">    attachRenderObject(newSlot);</span><br><span class="line">    <span class="keyword">super</span>.performRebuild(); <span class="comment">// clears the &quot;dirty&quot; flag</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="MultiChildRenderObjectElement"><a href="#MultiChildRenderObjectElement" class="headerlink" title="MultiChildRenderObjectElement"></a>MultiChildRenderObjectElement</h4><p>MultiChildRenderObjectElement也是继承自RenderObjectElement，有多个孩子Element。</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@override</span></span><br><span class="line"><span class="keyword">void</span> mount(<span class="built_in">Element?</span> parent, <span class="built_in">Object?</span> newSlot) &#123;</span><br><span class="line">  <span class="comment">//调用父类RenderObjectElement.mount，会创建RenderObject，并挂载到render tree</span></span><br><span class="line">  <span class="keyword">super</span>.mount(parent, newSlot);</span><br><span class="line">  <span class="keyword">final</span> MultiChildRenderObjectWidget multiChildRenderObjectWidget = widget <span class="keyword">as</span> MultiChildRenderObjectWidget;</span><br><span class="line">  <span class="keyword">final</span> <span class="built_in">List</span>&lt;<span class="built_in">Element</span>&gt; children = <span class="built_in">List</span>&lt;<span class="built_in">Element</span>&gt;.filled(multiChildRenderObjectWidget.children.length, _NullElement.instance);</span><br><span class="line">  <span class="built_in">Element?</span> previousChild;</span><br><span class="line">  <span class="comment">//遍历widget children，比如Column/Row的children</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="built_in">int</span> i = <span class="number">0</span>; i &lt; children.length; i += <span class="number">1</span>) &#123;</span><br><span class="line">    <span class="comment">//inflateWidget的作用是为child widget创建Element，并执行Element.mount</span></span><br><span class="line">    <span class="comment">//新建一个IndexedSlot，第一个参数是index，第二个参数是前一个兄弟Element</span></span><br><span class="line">    <span class="keyword">final</span> <span class="built_in">Element</span> newChild = inflateWidget(multiChildRenderObjectWidget.children[i], IndexedSlot&lt;<span class="built_in">Element?</span>&gt;(i, previousChild));</span><br><span class="line">    children[i] = newChild; <span class="comment">//child elment放到children数组中</span></span><br><span class="line">    previousChild = newChild;</span><br><span class="line">  &#125;</span><br><span class="line">  _children = children;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/Flutter/" rel="tag"># Flutter</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/posts/66ec960c.html" rel="prev" title="C++语法手册">
                  <i class="fa fa-angle-left"></i> C++语法手册
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/posts/60dc81b5.html" rel="next" title="Flutter渲染流程">
                  Flutter渲染流程 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">Jason</span>
  </div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener external nofollow noreferrer" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" rel="noopener external nofollow noreferrer" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/next-theme-pjax/0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.24/fancybox/fancybox.umd.js" integrity="sha256-oyhjPiYRWGXaAt+ny/mTMWOnN1GBoZDUQnzzgC7FRI4=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>


  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.min.js","integrity":"sha256-K7oJiQlDulzl24ZUFOywuYme1JqBBvQzK6m8qHjt9Gk="}}</script>
  <script type="module" src="/js/zenuml-definition-074a43fa.js"></script>
  <script type="module" src="/js/mermaid-zenuml.esm.min.mjs"></script>
  <script src="/js/third-party/tags/mermaid.js"></script>


  <script src="/js/third-party/fancybox.js"></script>



  




  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="/js/third-party/math/mathjax.js"></script>



</body>
</html>
